Related items results

Support
#1

I am trying to get the Customers Also Viewed these products results to look like the Related Items in woocommerce.


The Customers Also Viewed results appear vertically and too large.
Thanks

#2

Hi,

To fix it, you can add this in Theme Options > CSS

.related.products li.product {
   width: 22%;
}

Hope that helps

1 Like
#3

Yay, that works! Now how do I move them into the custom tab I have setup?


Thanks.

#4

Actually if I could move the recommendations to the description tab that would work. I am using woocommerce recommendation engine.
Thanks.

#5

Hi,

To achieve that, you can try adding this in Cornerstone Bulder > JS

jQuery(function($) {
   $('.related.products').insertBefore('.x-tab-content .cp-load-after-post');
});

Hope that helps.

#6

That didn’t move it. I enabled the built in related products and it didn’t move either.
Thanks for the reply.

#7

It also seems like the description tab is the default location for related items. Is this not the case with pro or x?
Thanks

#8

Hi,

The default location of related products are below the tabs.

See Demo Page - http://demo.theme.co/shop-integrity/product/ship-your-idea-2/

If you want it to move to the description tab, you need to enable description tab and add this code in Theme Options > JS


jQuery(function($) {
   $('.related.products').insertAfter('.description_pane');
});

Thanks

#9

That doesn’t seem to move anything. I can move the default related products to a custom tab with this

// Remove related products below the tabs
// =============================================================================
function remove_related_products(){
  remove_action( 'woocommerce_after_single_product_summary', 'x_woocommerce_output_related_products', 20 );
}
add_action('wp', 'remove_related_products');

/*
 * Register custom tab
 */
function woo_custom_product_tab( $tabs ) {
   
    $custom_tab = array( 
      		'custom_tab' =>  array( 
    							'title' => __('Custom Tab','woocommerce'), 
    							'priority' => 9, 
    							'callback' => 'woo_custom_product_tab_content' 
    						)
    				);

    return array_merge( $custom_tab, $tabs );
}

/*
 * Place content in custom tab (related products in this sample)
 */
function woo_custom_product_tab_content() {
	woocommerce_related_products();
}
add_filter( 'woocommerce_product_tabs', 'woo_custom_product_tab' );

But this does not move the Woocommerce Recommendation Engine Results.

#10

Hi there,

What recommendation you’re trying to move? Can’t find it on your product page, or is it the rating section?

Thanks!

#11

It is working now.


I had to add some text to the description box first.
Thanks.

#12

The results show under the discussion tab also… How do I prevent this?

#13

Hi,

I could not see the results in any of your page.

Can you provide us screenshots and exact url of the page where we can see the issue.

Thanks

#14

Sorry. You are right. Here is a link with the related products results showing under description and discussion.


Thanks!

#15

Hey @applegatetech,

I don’t see related products under the description and discussion tabs.

Looks like you’ve sorted out the issue.

Thanks.

#16

Not yet. See here.

#17

Hey There,

Pro 2.0.0 is now available in your dashboard! You can update to this latest version manually. This release contains fixes for several issues so be sure to check out the changelog (https://theme.co/changelog/). After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

To know more how you can update manually, please see “Manual Update” section from this knowledge base article:

And to moved the related products inside the description tab, please use this JS code instead:

jQuery(function($) {
   $('.related.products').appendTo('.x-tab-content .description_pane');
});


Please let us know how it goes.

#18

Yay. Thanks. How do I remove the scroll bar in the description tab?

#19

Hello there,

Please add this code in X > Launch > Theme Options > CSS:

.x-tab-content {
    overflow: visible !important;
}

Hope it helps.

#20

Thanks. When I tried the above code it removed the results from the description tab and placed them below it.