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

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

  • Avatar: murmoon
    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

    11 Answers
    Avatar: Rose Tyler
    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

    Avatar: murmoon
    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?

    Avatar: Rose Tyler
    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

    Avatar: murmoon
    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

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 30, 2018 at 11:41

    Hello,

    Ok, we have passed this suggestion to our developers.

    Regards

    Avatar: murmoon
    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

    Avatar: Olga Barlow
    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

    Avatar: murmoon
    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.
    Avatar: Olga Barlow
    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

    Avatar: murmoon
    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?

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    June 6, 2018 at 17:43

    Hello,

    You should keep fixed files in child theme folder.

    Regards

  • Viewing 12 results - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.