Home › Forums › WoodMart support forum › Product Grid for Crosssells and Upsells?
Product Grid for Crosssells and Upsells?
- This topic has 3 replies, 2 voices, and was last updated 3 years, 8 months ago by
Elise Noromit.
-
AuthorPosts
-
August 26, 2021 at 10:57 am #314733
ThoraParticipantHello,
we added two tabs in single product view for Crosssells and Upsells as explained in the WooCommerce documentation.
This is the final code for the crosssell tab:
add_filter( 'woocommerce_product_tabs', 'woo_new_product_crossselltab' ); function woo_new_product_crossselltab( $tabs ) { $crosssells = get_post_meta( get_the_ID(), '_crosssell_ids', true ); // Adds the new tab if ($crosssells != '') { $tabs['product_crosssells'] = array( 'title' => __( 'Passendes Zubehör', 'woocommerce' ), 'priority' => 40, 'callback' => 'woo_new_product_crossselltab_content' ); } return $tabs; } function woo_new_product_crossselltab_content() { $crosssells = get_post_meta( get_the_ID(), '_crosssell_ids', true ); // The new tab content $args = array( 'post_type' => 'product', 'posts_per_page' => -1, 'post__in' => $crosssells ); $products = new WP_Query( $args ); if( $products->have_posts() ) : woocommerce_product_loop_start(); while ( $products->have_posts() ) : $products->the_post(); wc_get_template_part( 'content', 'product' ); endwhile; // end of the loop. woocommerce_product_loop_end(); endif; wp_reset_postdata(); }
When the Product Archive within the theme settings is set to “Grid”, everything works fine and the crosssell products are displayed in 3 columns according to the default view. Unlike in the product archive, the number of columns cannot be changed by the user, but this is currently not important to us at this point.
But we would like to allow the user to select the list view in addition to various column views. Therefore we have set Product Archive view to “Grid/List”. But then the crosssell products are shown as list.
Is it possible to change the view to the grid view with 3 columns, e.g. with an added args array?
Thank you in advance.
August 26, 2021 at 9:18 pm #314815
Elise NoromitMemberHello,
Wocommerce customization is not covered by our support. Please check the theme options related to Upsells products position in the Theme settings > Single Product page > Show and hide elements.
Cross-sell products appear on the shopping cart.
If you have any questions please feel free to contact us.
Best Regards
September 7, 2021 at 2:45 pm #317026
ThoraParticipantHello,
Yes, I know that cross-sell products are displayed in the cart by default, but we have changed it to the individual product page as we find it more useful here.
I have now figured it out myself.
Anyone interested can find the final code below. I added the two lines starting with “woodmart_set_loop_prop”, now it is displayed as desired. The number of columns can be adjusted to your own wishes. For upsells you only have to change every “crosssell” to “upsell”.
add_filter( 'woocommerce_product_tabs', 'woo_new_product_crossselltab' ); function woo_new_product_crossselltab( $tabs ) { $crosssells = get_post_meta( get_the_ID(), '_crosssell_ids', true ); // Adds the new tab if ($crosssells != '') { $tabs['product_crosssells'] = array( 'title' => __( 'Passendes Zubehör', 'woocommerce' ), 'priority' => 40, 'callback' => 'woo_new_product_crossselltab_content' ); } return $tabs; } function woo_new_product_crossselltab_content() { $crosssells = get_post_meta( get_the_ID(), '_crosssell_ids', true ); // The new tab content $args = array( 'post_type' => 'product', 'posts_per_page' => -1, 'post__in' => $crosssells ); $products = new WP_Query( $args ); if( $products->have_posts() ) : woocommerce_product_loop_start(); woodmart_set_loop_prop( 'products_view', wc_clean( wp_unslash( 'grid' ) ) ); woodmart_set_loop_prop( 'products_columns', wc_clean( wp_unslash( '5' ) ) ); while ( $products->have_posts() ) : $products->the_post(); wc_get_template_part( 'content', 'product' ); endwhile; // end of the loop. woocommerce_product_loop_end(); endif; wp_reset_postdata(); }
September 7, 2021 at 10:35 pm #317069
Elise NoromitMemberHello,
Thank you very much for sharing your code. I am sure this code would be useful for other site owners who would like to implement the same on their site.
Wish you a wonderful day!
-
AuthorPosts
Tagged: upsells in tab
- You must be logged in to create new topics. Login / Register