Customising Woocommerce product boxes

Hi Elliot,

I was afraid of that! As an alternative, since the shop is actually just a few products, is it possible to work the other way around – ie style it all as regular pages under the enfold editor, creating the pages and then somehow bring in the functionality of the woocommerce through buttons etc much like we insert items like headings and grids etc? Can the functionality of a woocommerce button be applied to a regular button created in enfold?

Or is it better to just get stuck into the CSS. It seems quite daunting because the cart etc pages are really far away from the rest in look and layout, ie they dont have the same headings etc.

I am really just trying to convert an existing site onto this theme/platform to have the order process a little better for the user (at the moment a mailto) and to make sure they send the right info as opposed to leaving it up to them in their email (which often doesnt work on windows if no default mail app is specified).

As you can see from the site the store is very simple, I would just like the “add to cart” etc functionality that woocommerce brings but very much I would like to keep the look and feel quite similar. Enfold is allowing that everywhere else very nicely so far (havent got to the new bbpress yet tho!!)

I have never worked with woocommerce before but I am not afraid of ripping into the css. PHP is another story tho!

I have started digging into the css and don’t really have a problem with the basic styling of the text/price (adding into the style.css of the enfold child theme) but I need a bit of help to get started on some parts. Sometimes the selector list in Firebug is very long – how do i isolate which ones are pertinent to the element I am trying to alter?

To ask something more specific may be better and easier for you to answer so…just focussing on the thumbnail box for now:

1. Can I make the ‘add to cart’ and ‘show details’ buttons look more like the one on the home page mockup?
2. How to swop them around so ‘add to cart’ is on right and ‘show details’ on left?
3. How can they be made to be different colors and space equally within the box (border between each and edge of box equal)?
4. Can those two buttons have a rollover effect (color change)?
5. Can I add any other text than price and description (a list – like on the main site shop page)?
6. There is a white line on the top of the boxes but the rest of the border is blue. I cannot seem to find out why!?

Thanks!

Uh, hello?

The CSS is relatively simple to change and not a problem at all. But to alter the layout and change the buttons around etc means the woocommerce php template files need to be changed. However following all the web tutorials I have found on doing that seemed to be a waste of time as nothing actually happened that was supposed to. (Basic technique in a nutshell – put ‘templates’ folder from woocommerce plug into child theme, rename it ‘woocommerce’ and then edit the relevant php templates). So I tried again on a basic wordpress theme and installation with the woocommerce plugin and then it all happened as expected and as per the tutorials! Then I moved back to activate enfold, and nothing! All the changes now disappeared.

I am assuming now that enfold is somehow impeding this process as when it is active nothing works anymore and it goes back to the enfold layout. Woocommerce no longer works like it does in the ‘vanilla’ version. Obviously when enfold child is active the changes to the php docs are no longer being read or are ignored. I would like to know how to override that or at least do the same thing in the enfold scheme of things because I have already done a whole ton of work in the enfold theme with the rest of the site and don’t want to have to start from scratch again.

I don’t need a freelancer, I can do it myself, and it works but not when enfold is active theme so iit is something you guys have obviously done and that is why I am asking you! I have spent two days now trying and all I have found out is that the problem comes because of enfold, not the woocommerce customisation.

How do I customise the woocommerce templates? Not CSS, but the layout of things, like moving buttons around etc.