WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
[resolved] Up-sells in a tab (9 posts)

  1. cabbola
    Member
    Posted 4 months ago #

    Is there a way to move up-sells into a tab instead of sitting below the product description?

    https://wordpress.org/plugins/woocommerce/

  2. Daniel Espinoza
    Member
    Posted 4 months ago #

    Yes, you can add this code to your theme's functions.php file:

    // Remove the WooCommerce Upsell hook
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
    
    // Add a custom action to display Upsells
    add_action( 'growdev_after_single_product_summary', 'woocommerce_upsell_display', 15 );
    
    // A filter to add a custom tab
    add_filter('woocommerce_product_tabs','growdev_add_tab');
    
    // Callback for add_filter that defines the filter. You can change 'New tab' to the desired
    // tab title
    // growdev_custom_tab is the function callback
    function growdev_add_tab( $tabs ) {
    	$tabs['upsell_tab'] = array( 'title' => 'New tab',
    								 'callback' => 'growdev_custom_tab');
    	return $tabs;
    }
    
    // The function callback for the custom tab.
    // This does the display upsells action inside of the tab
    function growdev_custom_tab( $key, $tab ) {
    
    	do_action('growdev_after_single_product_summary');
    
    }

    This is what it looks like on the new tab: http://esp.im/image/42270J2x3G0A
    And on other tabs the upsells are hidden: http://esp.im/image/070X1d182E2x

  3. cabbola
    Member
    Posted 4 months ago #

    Daniel, you are a genius. Thank you very much for this snip-it.

    Couple of problems, and this may be that I am using 2.1.2

    I have renamed the tab "Related Tests" to suit my needs and that works fine.

    1. The problem is that: remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 ); does not remove Upsell below the description.

    2. Is there any way to rename the "You may also like…" to "Related Tests"? or remove "You may also like…" altogether.

    I can add this to my css...
    .upsells h2 {display: none;}
    .upsells {margin-top: 1.5em;}

    But I am sure there is a better way.

    http://www.buyatestkit.com/products/5-panel-urine-drug-test/

    Thank you for help in this matter, I really appreciate it.

    Bob

  4. Daniel Espinoza
    Member
    Posted 4 months ago #

    I tested using WooCommerce 2.1.2 (status report) so it should work with that version.

    1. Looks like the upsell might be added by your theme? Switch to TwentyFourteen theme and see if it is gone.

    2. Looks like you got this hidden just fine: http://esp.im/image/2l3G0j2f2p0I
    You may need to clear your browser cache to see it.

  5. cabbola
    Member
    Posted 4 months ago #

    Hi again, found the problem.

    I am using canvas and found this did the trick... remove_action( 'woocommerce_after_single_product_summary', 'woo_wc_upsell_display', 15 );

    Its now working as I wanted. Thanks so much

    Bob

  6. Daniel Espinoza
    Member
    Posted 4 months ago #

    Glad it's sorted!

  7. trangtkle
    Member
    Posted 4 months ago #

    Hi, how do you change the location of the tab?

  8. cabbola
    Member
    Posted 4 months ago #

    I added ( 'priority' => 29, ) Copy and paste the code between >>

    >>

    // Remove standard Related Products section
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
    // Remove the WooCommerce Upsell hook
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
    remove_action( 'woocommerce_after_single_product_summary', 'woo_wc_upsell_display', 15 );
    // Add a custom action to display Upsells
    add_action( 'growdev_after_single_product_summary', 'woocommerce_upsell_display', 15 );

    // A filter to add a custom tab
    add_filter('woocommerce_product_tabs','growdev_add_tab');

    // Callback for add_filter that defines the filter. You can change 'New tab' to the desired
    // tab title
    // growdev_custom_tab is the function callback
    function growdev_add_tab( $tabs ) {
    $tabs['upsell_tab'] = array( 'title' => 'Related Products',
    'priority' => 29,
    'callback' => 'growdev_custom_tab');
    return $tabs;
    }

    // The function callback for the custom tab.
    // This does the display upsells action inside of the tab
    function growdev_custom_tab( $key, $tab ) {

    do_action('growdev_after_single_product_summary');

    }

    >>
    You can change... 'priority' => 29, from 25 to 29 and this will move the tab placement.

  9. wesleyong
    Member
    Posted 3 weeks ago #

    Hi Mate,

    I couldn't manage to display number of products correctly when applies the tab code. It supposes displays 4 related products instead of 2. It works fine before apply the tab code. Below are the url and the source:

    http://www.regen2u.com/enko/?product=blue-color-iphone-5-iphone-5c-iphone-5s-case

    [ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ]

    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
    
    add_action( 'growdev_after_single_product_summary', 'woocommerce_output_related_products', 20 );
    
    add_filter('woocommerce_product_tabs','growdev_add_tab');
    
    function growdev_add_tab( $tabs ) {
    $tabs['upsell_tab'] = array( 'title' => 'You may also like',
    'priority' => 39,
    'callback' => 'growdev_custom_tab');
    return $tabs;
    }
    
    function growdev_custom_tab( $key, $tab ) {
    do_action('growdev_after_single_product_summary');
    
    if ( !function_exists( 'woocommerce_output_related_products' ) ) {
     	function woocommerce_output_related_products() {
     		woocommerce_related_products( 4,4  );
     	}
     }
    
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
    add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_upsells', 15 );
    
    if ( !function_exists( 'woocommerce_output_upsells' ) ) {
     	function woocommerce_output_upsells() {
        woocommerce_upsell_display( 4,4 );
     	}
     }
    }

    Can help to verify whether I did something wrongly in the code?

    Thanks in advanced!

Reply

You must log in to post.

About this Plugin

About this Topic