Csutomizer problems/Woocommerce

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

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

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