Csutomizer problems/Woocommerce

Oh, and I forgot one more thing (sorry):

– at 1025px screen width, the mobile header AS WELL as the normal desktop header are displayed…

Hi @rockysaxxx,

– I downloaded a child theme from your generator. It has a lot of different folders that I don’t need. Can I remove everything beside the functions.php and style.css?

All of the files in the child theme are there for a reason. You can savely remove:

# languages folder
# js folder (if you don’t plan to add custom js to your website)
# assets folder, package.json & gulpfile.js (if you don’t plan to use Gulp)

I’d keep the css folder with the wpbf-customizer.css file as we may use this in the future.

– I noticed a couple of bugs: I am using WOocommerce, and in the customizer settings there is an option to set the padding/margin between the products on the product archive pages(none, small, medium etc). No matter which is chosen, there is always the same padding/margin between the items..

I was able to replicate this and will have a look this asap. Should be fixed with the next release!

– the settings for how many products are shown in each row does not work for mobile devices. Even if you set 1 product each row for cell phones and two for tablets, there are still 3 shown for example at 500px screen width.

I wasn’t able to replicate this. Please note that the mobile breakpoint is at 480px.

– the product gallery images on the single-product-page have no padding around them, they are basically “attached” to each other…that can’t be the way it is supposed to be?

It is! ?? You can do something like this to add padding to the images:

.woocommerce div.product div.images .flex-control-thumbs li img {
    padding: 2px;
}

Hope that helps! ??

– at 1025px screen width, the mobile header AS WELL as the normal desktop header are displayed…

I wasn’t able to reproduce this on my end – feel free to share your website here so I can have a look.

Thanks for pointing out these issues!

Have a great day.

Best,
David

Hi David!
Thank you for your reply.
My site is on localhost unfortunately, but I am confused: When you choose 2 products for each row on tablets, and 4 on desktop, the customizer shows it correctly, but not the real frontend. On the frontend, it goes from one product to three at 480px and to 4 at 1026px.

Regarding the double header: This is odd. I only get this on one screen when using dev tools–>screen sizes, but not on the other for the same screen width…

Also, I noticed that the first&last name in the chekcout fields are always 50% of the row which makes sense for larger screens but not really for cell phones where each input field becomes too short for a lot of names. Is it possible to change this – most themes actually have the first&last name input field full width on cell phones/small screen sizes.

Thanks!

Hey @rockysaxxx,

My site is on localhost unfortunately, but I am confused: When you choose 2 products for each row on tablets, and 4 on desktop, the customizer shows it correctly, but not the real frontend. On the frontend, it goes from one product to three at 480px and to 4 at 1026px.

In the theme, the breakpoints are at 480px, 768px & 1024px. The customizer doesn’t show the exact same breakpoints so the logic on the front-end is a bit different.

Are you testing this in Firefox’ console? As I was looking into this, I’ve noticed some glitches where the layout breaks at points that don’t even exist.

This may also be the issue for the double-header you mentioned.

In Google Chrome, everything works as expected.

The responsive settings for the WooCommerce product grid work like this:

# mobiles: until 480px
# tablets: until 1024px
# desktops: from 1025px

Hope that makes sense! ??

Also, I noticed that the first&last name in the chekcout fields are always 50% of the row which makes sense for larger screens but not really for cell phones where each input field becomes too short for a lot of names. Is it possible to change this – most themes actually have the first&last name input field full width on cell phones/small screen sizes.

Totally agree with that. Added this to the roadmap! ??

PS: the WooCommerce grid-gap issue has been fixed with the latest update! ??

Best,
David

Hello David,

thank you very much for the reply and the info on all the updates in the new version!

Regarding the woo grid: I used dev tools in Chrome as well as Firefox, and the behaviour is the same: My customizer settings are:

Cell–> 1 product per row
Tablet–> 2 products per row
Desktop–>4 prodducts per row

and on the frontend, the behaviour is like this:

up to 479px: 1 product per row
from 480px to 1023px: 3 products per row
from 1024px: 4 products.

See my screenshots, the first one is at 1023px and the second one at 550px width in Chrome dev tools. The second one should display two and not three products…

Rocky

Hi Rocky,

I’ve tried to recreate this (please see the screenshots below) and everything works fine on my end on a pretty much fresh installation.

Do you get any errors turning debug mode on?

https://www.dropbox.com/s/5h8g5kqcjsh0grt/Bildschirmfoto%202018-10-26%20um%2019.19.16.png?dl=0

https://www.dropbox.com/s/vdexsriwdkate47/Bildschirmfoto%202018-10-26%20um%2019.22.34.png?dl=0

Best,
David

Rocky,

please try to enter a different value in each field, hit save and then go back to 4 – 2 – 1. Does that change something? Just came to my mind, worth a shot.

Best,
David

Yes, that helped! Thank you!