Return to previous page

Add Product Variation Select Directly to Woocommerce Shop, Category and Archive

This topic has 12 replies, 3 voices, and was last updated 5 years, 10 months ago ago by Olga Barlow

murmoon

Participant

May 16, 2018 at 08:07

Hi, please help to add product variation select on main shop/caralog page. I need to allow customers choose product’s variations without going to single product page.

https://www.dropbox.com/s/05o5nrf64shbw6k/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202018-05-16%2010.02.44.png?dl=0

#193056 Copied Theme version: last WooCommerce version: 3.3.3

11 Answers

Rose Tyler

Support staff

May 16, 2018 at 08:23

Hello,

There is no such possibility. You may find an additional plugin that can provide this functionality (I can’t recommend such plugin because we don’t guarantee full compatibility of 3rd-party plugins with our theme). Also, you can try to achieve the desired result via customization in files, in this case, do not forget about child theme. If you need help with additional customization you can contact WPKraken team.

Regards

#193057 Copied

murmoon

Participant

May 26, 2018 at 07:58

I bought this premium plugin https://yithemes.com/themes/plugins/yith-woocommerce-color-and-label-variations/
It does not work from the box and has a conflict with your theme.
It was fixed by adding following custom code in the file functions.php of your theme.

/**
Fix compatibility with Color and Label Variations
*/
if( !function_exists(‘yith_wccl_set_wrapper_container_shop_js’) ){
add_filter(‘yith_wccl_wrapper_container_shop_js’,’yith_wccl_set_wrapper_container_shop_js’);

function yith_wccl_set_wrapper_container_shop_js( $selector ){
$selector = ‘div.product’;
return $selector;
}
}

To fix CSS size issue I added following code in Apperance -> Customize -> Additional Css

.variations_form.cart.in_loop .variations select {
width: 100%;
margin-top: 15px;
}

Now it is working but not still look not nice:

1. After I choose the attribute on shop page on mobile, the page is automatically increased the zoom and need to finger it back to reduce.
https://www.dropbox.com/s/5wtyr04s46vi1rh/utf-8%27%27%D0%92%D0%B8%D0%B4%D0%B5%D0%BE.MOV?dl=0

2. When I click “add to cart” there is no standard visual effect.
https://www.dropbox.com/s/2cfzbv4yj917nxh/utf-8%27%27%D0%92%D0%B8%D0%B4%D0%B5%D0%BE1.mov?dl=0

my site: https://borovichi.sushifoods.ru/product-tag/акция/

Can you assist to make your theme work smooth with this premium plugin? Or should I look for 3rd part to help me?

#193640 Copied Theme version: 4.3 WooCommerce version: 3.4

Rose Tyler

Support staff

May 29, 2018 at 09:20

Hello,

Sorry, but we don’t provide support for 3-rd party plugins as it’s out of our support scope.
The visual effect relates to “Ajax “Add To Cart”” option that works only for simple products; this can be disabled in Theme Options > Single Product Page. Please try to disable the option, I hope it helps you.

Regards

#193737 Copied

murmoon

Participant

May 29, 2018 at 16:30

Can you please replace the row in header.php file in future updates and your theme will work smooth with one more premium plugin?
___________________________
YITH Support Team (YITH)
May 29, 17:16 CEST

Hi Sergey,

The problem was related to the theme settings.
I’ve solved the problem replacing this row:

<meta name=”viewport” content=”<?php if($etheme_responsive): ?>width=device-width, initial-scale=1, maximum-scale=2.0<?php else: ?>width=1200<?php endif; ?>”/>

with:

<meta id=”viewport” name=”viewport” content=”width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1″ />

in “/wp-content/themes/woopress/header.php” file.

You must notify this problem to the theme developer so that he can solve it in future updates.

Best regards,
Corrado

#193799 Copied

Olga Barlow

Support staff

May 30, 2018 at 11:41

Hello,

Ok, we have passed this suggestion to our developers.

Regards

#193875 Copied

murmoon

Participant

May 31, 2018 at 18:39

Please pass this suggestion to your developers too.

Question:
I find out the difference between theme’s Add to cart button and your plugin’s Add to cart button. If I click theme’s Add to cart button, I see visual confirmation than product is added to the cart. If I click plugin’s Add to cart button, there is no visual confirmation and I can not understand was the product added to the cart or not. Need to check the cart.
At first I send this request to theme’s authors and they re-send me to plugin’s authors. Please help me to let my site works perfect with your plugin.
Video

Answer:
Hi sergey,
I checked your site and I discovered following problem.
Your theme apply a customization to default add to cart in loop page.
Take the file wp-content/themes/woopress/woocommerce/loop/add-to-cart.php at line 28
You see that there’s a check on the product type and customization is valid only for simple products.

picture

If you remove that check, you will see that something improve in the layout, but not all.
Loader that you see is made in JS by the theme but sincerously I don’t know the theme and where it’s doing it, in which part of the code.
I suggest you to contact the theme developer and report him my reporting.
OIn particular you need to have these two components in the HTML.

picture

Ask them where’s the code that process this action.
I hope to be helpful.
Best regards,
Alessio Torrisi

#194037 Copied

Olga Barlow

Support staff

June 4, 2018 at 13:30

Hello,

Can you, please, provide correct Dashboard access to your site to help you with this problem?

Regards

#194203 Copied

murmoon

Participant

June 4, 2018 at 14:06

On this page you can find simple and variable products: https://cherepovets.sushifoods.ru/шаверма/
the site uses child theme

Please, contact administrator
for this information.

#194208 Copied Theme version: last WooCommerce version: 3.4.1

Olga Barlow

Support staff

June 5, 2018 at 19:29

Hello,

Progress option was added for simple products only because variable products can’t be added to cart by default in WC. But if we allow that action for the variable products too (woopress-child/woocommerce/loop/add-to-cart.php , http://prntscr.com/jr94f7) it does not work because plugin overwrites the add to cart for variable products and removes required html http://prntscr.com/jr93oh that is added by js (etheme.js, classie.js that minified and combined with few other js files into plugins.js). We did not find the simple solution to change it. Submit the request to WPKraken team for additional customization.

Regards

#194349 Copied

murmoon

Participant

June 5, 2018 at 22:06

If WPKraken team fix it for me, will you add this to future theme’s update?
Or should I always keep fixed files from WPKraken team in Child folder?

#194354 Copied

Olga Barlow

Support staff

June 6, 2018 at 17:43

Hello,

You should keep fixed files in child theme folder.

Regards

#194454 Copied
Viewing 12 results - 1 through 12 (of 12 total)