SOLVED: Some bugs in Cart items element

Browser: Chrome 115
OS: Windows

Hi,

While checking the Cart items element, I encountered a few bugs that I would like to point out.

1- The position of the remove product button is different in builder and front end.

in builder :

in frontend :

2- The display position of the update cart button is also problematic as in the above case.

in builder :

in frontend :

3- In the header section of this element, the border radius control does not work.

4- The header is not displayed at all in the builder.

5- On the front end, all item items are centered vertically. But in Builder they are stuck to the top.

in builder :

in frontend :

6- It may be strict, but the quantity button is not in the center and should be placed a little lower. (The reason for this is that quantity has Margin from the bottom by default)

7- This is not a bug. But the very strange thing in this element is that the style of the cart update button and the application of the coupon are controlled in an integrated manner. Please separate the style of these two buttons from each other.

8- If you add the width control for the coupon form and update cart and apply coupon button, it will be even better. :wink: Because it will help a lot for Responsiveness.

thanks

Hi Hosein,
Some points (at least 1, 2, 4, 5) in your report are caused by different widths (while comparing). In the builder, you usually have much less space available than in the front end (because of the elements and structure panel). If you make the front end smaller, you will see the same behavior, and accordingly, all these points are not a bug.

#3 The border-radius is applied to the thead, which does not work in regular HTML either - so this is not a bug.

#6 This is due to the margin-bottom of the quantity input, which seems superfluous at first glance.

#7 Well, both are WooCommerce buttons :smiley: You can target both of them with CSS, e.g. button[name=“apply_coupon”] {…}

#8 What is the problem with the current implementation?

thank you @timmse,

About 1,2,4,5, this is the only element that behaves like this.I don’t know if the current situation can be improved or not, but it doesn’t feel good in Builder. Although the front end is important, but still…

#3 Yes, it seems that there is no way.

#6 Yes, but not solvable by default?

#7 Yes, but bricks have customization options for almost everything. But in some sections, although they are simple, there is no customization option for them. There is exactly this position in the mini cart element. I think it would be great if you could improve the current customization options a bit in addition to the great features you add. Please note that not all users know css.

#8 No problem, but it allows users to control the width of these items if needed. For example, on mobile, we want the field width to be 50%, coupon application width to be 50%, and cart update width to be 100%. In this case, there will be no restrictions.

I personally know css to a great extent. But it will be more appropriate to customize the elements with the bricks themselves.

Jet woobuilder plugin offers complete customization options in its cart items widget. But unfortunately, it is only compatible with Elementor.

Hi Hosein,
We’ve fixed issue #6 in Bricks 1.9.2, now available as a one-click update in your WordPress Dashboard.

Changelog: Changelog – Bricks

Best regards,
timmse

1 Like

thank you @timmse,

cheers