Issue with Grouped Products (GeneratePress)

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;
}

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.

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 4 years, 7 months ago by taisho.
• This reply was modified 4 years, 7 months ago by 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 4 years, 7 months ago by taisho.
• This reply was modified 4 years, 7 months ago by taisho.