Woo's Response to issues in Epik with WooCommerce

Sorry I’m not sure why they would say that. There are no template overrides, or any WooCommerce code added inside of the theme that would affect WooCommerce functionality.

The only thing that Epik will affect is the looks/style (css), but the functionality is not affected by the child theme in any way since they haven’t added any code to control WooCommerce.

If you’re using the Genesis Framework you’re supposed to use the “Genesis Connect” WooCommerce plugin regardless of what child theme you’re using – https://wordpress.org/plugins/genesis-connect-woocommerce/ That should sync it up to work a little better with Genesis. Again, this has nothing to do with the child theme you use, you’ll need it no matter which Genesis theme you use since its designed to work with the framework. So give that plugin a try and see if it fixes any issues.

I’ve used WooCommerce with Epik and a few other themes and haven’t had any issues. They are actually using WooCommerce for this website (appfinite) as their store – https://appfinite.com/shop It’s what they’ve been using since the beginning, so it definitely works.

Are you referring to the look and feel?

Hi,

Looking at the sites again I can see that on this site

http://newlilypad.wpengine.com/product-category/accessory/

there are two bits of CSS affecting the image sizes. Firstly in

href=’//newlilypad.wpengine.com/wp-content/plugins/woocommerce/assets/css/woocommerce.css

there’s this

ul.products li.product a img {
width: 100%;
height: auto;
display: block;
margin: 0px 0px 8px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out 0s;
}

which is setting the image width to 100%. Setting things to % sizes is setting them relative to their containing block so an image that has 100% width isn’t necessarily its actual size, see here http://www.impressivewebs.com/width-100-percent-css/

Once you remove this the next problem is in the Epik style.css :

ul.products img {
background: none repeat scroll 0px 0px transparent;
border: 0px none;
float: left !important;
height: auto;
margin: 0px 12px 0px 0px;
padding: 0px;
width: 90px;
}

which is setting the img width to 90px. Remove this and the image displays at its correct size.

On the site http://www.lilypadev.com/product-category/accessory/ images are correct size because its not using the WooCommerce CSS and there’s a rule in the custom.css file

ul.products img {
width: auto;
height: auto;
}

If you change the rules in the Woo Commerce and Epik CSS style files, then you could affect something else. What I would do is create a new rule that is specific enough overrides these two rules. Something like the custom.css rule above with !important after it.

On this page the problem is similar http://newlilypad.wpengine.com/shop/electric-vehicle-charging-station-signs-two/

the woocommerce.css is sizing the images to 100%, which is why they are too big.

div.product div.images img, #content div.product div.images img {
display: block;
width: 100%;
height: auto;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out 0s;
}

Really Woo should be fixing that as they shouldn’t be sizing stuff to 100%

The rule #main { width: 600px; } is looking for the ID main in your HTML but I don’t see one so that is why this is having no effect. The <main> container doesn’t have an ID by which you can select it. The Epik style.css is setting the <main> container to 740px so change that

.content {
float: right;
width: 740px;
}

I don’t see anything in the HTML with a class of col-left so this line isn’t affecting anything

.col-left { float: left; }

I’m just using the Inspector in Firefox to see the code ( Right-click, Inspect Element (Q) ). I have then opened the CSS file which is why I can see/copy the comments.

Phil