Support » Plugin: Qty Increment Buttons for WooCommerce » Issue with Grouped Products (GeneratePress)

  • Resolved Stilian

    (@stilians)


    Hi,

    Before anything else, I want to thank you for creating this plugin! Nice work. 🙂

    Unfortunately, I noticed an issue on my grouped products page. The formatting of the quantity buttons is broken. Can you take a look at it? I provided a link for you.

    Also, have you tested the plugin with Elementor? When I add a Custom Add to Cart button on a page and I activate the quantity buttons, the formatting is again broken.

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author taisho

    (@taisho)

    Hello,

    thank you for reporting the issue. You can place this in your child theme CSS to override the default formatting (inline-block):

    .woocommerce-grouped-product-list-item__quantity .qib-container {
        display: inline-flex;
    }

    I will do some tests over the weekend and add this rule to the plugin if I have the same bad formatting with grouped products.

    I haven’t tested my plugin with Elementor yet. Could you please show me a link with such broken formatting?

    Best regards,

    Ryszard

    • This reply was modified 3 months, 1 week ago by taisho.
    Plugin Author taisho

    (@taisho)

    On my end, with Storefront theme, only the mobile view was poorly displayed. Here is a full set of CSS rules for grouped products that will be included in the next plugin release. Should look correctly for both the merged and unmerged buttons in desktop and mobile view:

    .single-product div.product form.cart table.woocommerce-grouped-product-list .woocommerce-grouped-product-list-item__quantity {
    	margin: 0;
    	padding-left: 0;
    	padding-right: 0;
    	text-align: left;
    }
    .woocommerce-grouped-product-list-item__quantity .qib-container {
    	display: flex;
    }

    Thanks for taking the time to enhance your code.

    As for Elementor, I’m not sure if there’s an issue, but Elementor’s quantity box is way long. I’ll give you a link to see what I mean. Can you tell why? And because of this, when your plugin is activated, the formatting is with gaps between. How could I make this prettier?

    Also, when your plugin is activated, on the product pages the add to cart button text offsets a few pixels from the vertical center. Visit any of my products’ pages. Is this my theme’s problem?

    I’d appreciate to hear your thoughts.

    Link: original post’s root domain + /sample-page/

    • This reply was modified 3 months, 1 week ago by Stilian.
    Plugin Author taisho

    (@taisho)

    Thank you for providing me the material to improve my plugin. You have a good eye for details, the vertical position was indeed a bit off. It’s because of line-height set to 1.2 by the plugin that can make the text go off the center depending on font size. I will change the line-height to 1 in the next plugin release.

    For the sample-page. there is no plugin formatting applied. Please try the option “load on all pages” in plugin settings. While it was primarily added for Quick View plugins compatibility, I will update the description to let the users know that it is a go-to option to take a shot at supporting custom pages as well.

    No problem!
    Yeah, having an eye for details is my gift and my curse… 😀

    Thanks for taking care of the line-height.

    So the long quantity box of the Elementor Add to Cart button is their code’s issue? (If so, I can talk to them.) I tested this on different themes and it’s long on all of them, except from the OceanWP theme. It’s probably because OceanWP has it’s own code for quantity buttons built-in, so that’s why yours gets pushed outside of theirs. But they manage to shorten the box to a normal width. Maybe you’re interested to how or if you could do the same? I can leave OceanWP as my theme for a while for you to see, or you could do your own tests if you like.

    *Note: I already had the “load on all pages” option checked when you checked my site.

    Plugin Author taisho

    (@taisho)

    I see what the problem is – there is no woocommerce class, so not a single style rule will be applied to this page from my plugin styles, as all rules use it. For example, even the increment arrows within the quantity field are present. Also, some other selectors like div.product won’t find a match because it is a custom page structure.

    I will think about a way to solve it. I don’t want to use !important in plugin CSS rules in case someone wants to apply custom styling, but if I use very short rules like form.cart .qib-button, many of them won’t be applied because theme rules will have a higher specificity.

    • This reply was modified 3 months, 1 week ago by taisho.
    • This reply was modified 3 months, 1 week ago by taisho.
    Plugin Author taisho

    (@taisho)

    I found a good solution to this and I’ll be releasing a 2.5 version tomorrow, with much wider compatibility for custom pages being the biggest improvement.

    That’s great, taisho. I can’t wait for the update!

    Hey, just to let you know:

    I got the update and here are 2 issues with OceanWP theme.

    1. While OceanWP’s own quantity buttons are enabled, yours are just wrapped around them (they are functioning). So they are not overwriting them.
    2. On Shop page, the quantity buttons are displayed above the product’s image. It’s the same whether before/after position is selected.

    Plugin Author taisho

    (@taisho)

    Hello,

    1. I downloaded OceanWP (it’s free) and checked the files. The one responsible for quantity buttons is in this path:

    oceanwp\assets\js\third\woo\devs\wooQuantityButtons.js

    I don’t know if there is any clean way to stop this JS file from being loaded. You could ask the support of OceanWP. Then the buttons from Qty Increment Buttons would show up alone. On page load, you may notice the OceanWP buttons appearing and the content jumping a bit. That’s the disadvantage of using .js files instead of PHP to manipulate the original page content.

    2. It means that the archive page layout is very custom and the following depending on “Before Add to cart” \ “After Add to cart” will not work as intended:

    add_action( 'woocommerce_after_shop_loop_item', 'qib_quantity_field_archive', 9 );
    add_action( 'woocommerce_after_shop_loop_item', 'qib_quantity_field_archive', 11 );

    You could replace 'woocommerce_after_shop_loop_item' with 'ocean_before_archive_product_add_to_cart_inner' or 'ocean_after_archive_product_add_to_cart_inner' in my plugin’s file and see if it solves the problem (2 hooks and 2 priorities = 4 combinations, 9 priority = “Before Add to cart”, 11 priority = “After Add to cart” in pklugin settings). Floating the OceanWP Add to Cart button right in CSS may or may not be needed.

    • This reply was modified 3 months, 1 week ago by taisho.
    • This reply was modified 3 months, 1 week ago by taisho.

    Thank you for everything. Your responsiveness and clear communication are exceptional. I wish you the best!

Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.