[Bug report] WooCommerce element "Add To Cart": Does not show available stock
Hi all,
in Brizy builder the WooCommerce element "Add To Cart" does not show available stock when using variable products!
I show you what it looks like without using Brizy Templates. On a single product page, which is generated by the Blocksy theme, the "Add To Cart" button looks like this when using variable products with different prices:
Above the button you can see a drop-down field to choose the variation. Once you select an item from the list, the button moves down. In between the drop-down field and the button you can see the price and available stock of a selected item:
This is the behavior I expect and which is described in the variable product woocommerce docs.
Now when I create a single product template in Brizy and use the "add to cart" element, it looks like this:
Once you select a variation, the button also moves down, but not far enough. The available stock seems to be hidden. Only the price is shown, very tight to the quantity field, stock is missing:
This seems to be a spacing issue. I tried to adjust padding and margin settings, without success.
I am using Brizy 2.2.8, Brizy Pro 2.2.5 and WooCommerce 5.0.0
To reproduce this bug you need to make sure:
- Select Variable product from the Product Data dropdown.
- In "Attributes" enable the Used for variations checkbox to tell WooCommerce it’s for your variations.
- In "Variations" you need to check "Manage stock?" for each variation.
- For each variation insert different prices and stock quantity.
This bug has already been reported three months ago, but was not corrected because the problem was not reproducible due insufficient details in the report.
I hope this explanations let you find the bug easily. I wish you can fix it quickly, my customer needs this feature urgently.
In the meantime I would appreciate any tips for a workaround. My researches habe been unsuccessful so far.
Uli
-
Hi,
Thank you for your message. Yes, we know about this inconvenience in the Stock element and our developers are already working to find the solution for it. Unfortunately, I can't say when we will release the fix but we will do our best to release it as soon as possible.
Best regards,
Sandra0 -
That is great news! I'm looking forward to getting this bug fix.
Uli
0 -
Hi,
Thank you! When we will receive a notification from our developers regarding this problem, we will inform you too!
Have a great day!
Best regards,
Sandra0 -
I've been playing around with WooCommerce for a while and I'm using the very popular Foo Events plugin now. When using the Blocksy theme the "add to cart" button looks like this:
Every element is visible and aligned to the left.
Using Brizy the same thing ist a pure mess:
Some fields are even missing. In this state WooCommerce is really unusable with Brizy.
PLEASE FIX IT!
Uli
0 -
Hi,
Is this view from the plugin you are using https://jmp.sh/J4UfV5n? How did you integrate it into the Brizy template?
Thanks!
Best regards,
Sandra0 -
Hi Sandra,
this view is generated on a WooCommerce product page, by using the "Add To Cart" element in Brizy. The "Add To Cart" view in turns can show up in different ways, depending on the product settings. For example variable products with stock management enabled generate dropdown fields and additional information regarding the availability of each variation. This is what you can see in my first post.
Now I installed the "FooEvents for WooCommerce" plugin and the "FooEvents Bookings" extension. Those generate additional dropdown fields within the "Add To Cart" element. In my example I have a total of three dropdown fields: Size, date, hour. And I get two different availability numbers, for size and date each.
In the FooEvents FAQ I found the information, that FooEvents is compatible with Elementor and Divi. So I was hoping Brizy would work as well.
If I can help in any way, I would be pleased to set up a test website for you. This way you could play around, also within the WordPress backend.
Uli
0 -
Hi,
At the moment, the Brizy template works fine with the standard WooCommerce plugin. If the WooCommerce products are added to some external extensions, then they can look a bit different because we don't have direct integration with them. I will inform the team about this aspect and they will investigate it a bit deeper.
Thank you for informing and reporting this inconvenience!
Best regards,
Sandra0 -
At the moment, the Brizy template works fine with the standard WooCommerce plugin.
This is not correct! The problem in my first post occurs with the standard WooCommerce plugin and without any additional plugins.
Uli
0 -
Hi,
About the initial issue, you reported in this post with the Stock element, we already sent it to the team and they are working on it. At the moment they identified the cause and the best solution for fixing this inconvenience.
Thank you!
Best regards,
Sandra0 -
This morning I was quite happy to see the release notes of Brizy 2.2.9.1 and the "Add To Cart" problem being solved. Now I'm disappointed to discover in fact nothing has changed! Here is the Add To Cart button rendered by the Blocksy theme, it shows the availability of 2, once a size is selected from dropdown menu:
When I activate Brizy for products in the Brizy settings and use the "Add To Cart" element it still does not show the availability, only the price:
For these screenshots I used: Brizy 2.2.9.1, Brizy Pro 2.2.6, WooCommerce 5.1.0. No further plugins installed. So the problem, which I described in the first post, is still unsolved.
Uli
0 -
Hi,
In this update, we didn't add the fix for the Stock feature of the Add to Cart element. We are still working on it and soon will release the fix for this inconvenience too. In this update was added the CSS fix for this element and was made to display correctly and in harmony with the styles from the template.
Thank you!
Best regards,
Sandra0 -
To everyone concerned in the add-to-cart style issue: I found a work-around, which I like to share here.
First an example to show, how the add-to-cart button looks like without Birzy, just by using the Blocksy theme:
The calendar is generated by the WooCommerce Bookings extension, the official booking extension provided by woocommerce.com.
When using the Brizy add-to-cart element, the same thing looks like this:
Fore whatever reason the whole area gets divided into two columns, which looks quite ugly.
Now instead of using the Brizy add-to-cart element, my idea was to use the WooCommerce "page" element and choose "product" from the list:
This way, the add-to-card button is generated by the theme, not by Brizy. Unfortunately this way not only the add-to-cart button is shown, but also the product image, price, description, meta data and so on. So all the information except the add-to-cart button must be removed. And here is how it can be done:
1. Install a child theme. The child theme of Blocky for example can be downloaded from here.
2. In the child themes folder (wp-content/themes/blocksy-child) generate a file named functions.php and paste the following content:
<?php
if (! defined('WP_DEBUG')) {
die( 'Direct access forbidden.' );
}
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'parent-style', get_template_directory_uri() .'/style.css' );
});
// This code must be inserted to activate style.css of Blocky's child theme:
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style('blocksy-child-style', get_stylesheet_uri());
}, 30);
// The following modifications prevent the product page from showing unwanted content:
// Remove image
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
// Remove title
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// Remove rating
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// Remove Price
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 30 );3. In the child themes folder (wp-content/themes/blocksy-child) generate a file named style.css and paste the following content:
/**
* Theme Name: Blocksy Child
* Description: Blocksy Child theme
* Author: Creative Themes
* Template: blocksy
* Text Domain: blocksy
*/
@media (min-width: 1000px) {
.ct-default-gallery.entry-summary, .ct-stacked-gallery.entry-summary {
padding-left: 0px;
width: 100%;
}
}
.product[class *="gallery"] form.cart {
margin-top: var(--product-element-spacing, -30px);
margin-bottom: var(--form-margin-bottom, -15px);
padding-top: var(--product-element-spacing, 0px);
border-top: 0pxsolidvar(--border-color)
}
p:empty:before {
content: inherit
}4. In the folder wp-content/themes/blocksy-child/woocommerce/single-product/ generate a file named meta.php and paste the following content (this prevents showing product meta data):<?php
/**
* Single Product Meta
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/meta.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 3.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
global $product;
?>With all modifications performed the Brizy WooCommerce page element (with "product" selected as shown above) will only show the add-to-cart button, which is generated by the theme, not Brizy.The result in my case looks like this:
Of course this is a very inconvenient procedure to get Brizy work with WooCommerce and I wish this bug could be fixed really soon.To the Brizy developers: The cart page, the checkout page and account page cannot be modified by Brizy, they are generated by the theme. So why not do the same thing with the add-to-cart button? Customers need to modify the theme settings anyway to match the look between WooCommerce and Brizy pages. This way the add-to-cart button also would look nice if you just let it be generated by the theme. I wish you could offer the possibility to choose from two different add-to-cart buttons: One generated by Brizy, the other generated by the theme. I guess this would make no big effort to implement.Kind regards,Uli0 -
Hi Uli,
Thank you for your contribution and for sharing with us the workaround you find helpful. Hope it will be useful for other users too.
Regarding the Brizy "Add to cart element" that is based on the WooCoomerce default plugin - our developers already fixed the problem with this element and Stock element and in one of the future updates we will release it.
Thank you!
Best regards,
Sandra0 -
Hi Sanda,
obviously you did not include the bug fixes to the latest Brizy update as requested. So everything got overwritten by the update and I have to apply the tweaks all over again. Disappointing waist of time.
Uli
0 -
Hi Uli,
At the moment, the problem with the Stock for variable products was fixed. See here. Could you please make sure you have the latest version for Brizy Free 2.2.16 and Brizy Pro 2.2.11? Also, could you please delete the browser and site cache?
Best regards,
Sandra0 -
I'm sorry Sandra, I posted in the wrong thread. My comment was referring to this thread. Maybe you can move this.
Uli
0 -
Thank you for updating us about this. I already send you a reply to that post.
0 -
Hello I'm having the same problem of the add to cart and any other fields going into their own columns instead of underneath my calendar. I've already updated to the latest Brizy and cleared my cache. Here is my site https://ambiance.events/?product=standard-luxury
0 -
Hi,
Unfortunately, at the moment we don't have full integration with all WooCommerce extensions and for this reason, can appear this type of inconvenience. Now, we have the full integration with standard WooCommerce plugins but we will discuss with the team about adding a solution for this case.
Best regards,
Sandra0 -
Now, we have the full integration with standard WooCommerce plugins
In my opinion WooCommerce Bookings is definitely a standard plugin. It is developed by Woo (not a third party product), integrates perfectly with WooCommerce (except when using Brizy) and is one of the most popular and most expensive plugins for WooCommerce.
Uli
0 -
Here is another example of a very popular (+800.000 installations) plugin by the WooCommerce developers:
WooCommerce PayPal Checkout Payment Gateway
Using this plugin, the Add to Cart button looks like this:
Unfortunately, when using Brizy, the whole layout gets ruined:
Again, the same problem: Elements get arranged side by side instead of underneath.
By the way: This plugin would solve the problem described in this thread (but actually doesn't because of the layout mess up): Mini cart not empty after PayPay purchase when using Safari on MacOS and iOS
Uli
0 -
Hi Uli,
Thank you for your message and feedback. We appreciate it. Unfortunately, the extensions you mentioned aren't part of the standard WooCommerce plugin but at the moment we don't have full integration with all of them. As I said in my previous message, we will discuss with the team about adding a solution for this case.
Best regards,
Sandra0
Please sign in to leave a comment.
Comments
22 comments