Simple styling of WooCommerce order information boxes
-
As part of the customer experience of clicking through and buying things, WooCommerce shows info boxes to let them know what’s going on. Those boxes, on my Twenty Seventeen theme, are a dark teal. I would like to be able to configure the appearance of these boxes so they better match my customizations. I don’t know how to do so.
Is there a theme or appearance customizer specifically for the Shop?
Is there an element or class that I should look for in the .css files that specifically handles these boxes, and when I use Additional CSS to alter their appearance, can someone tell me a predictable action sequence I can use to go and test the appearance while I’m working in the Customizer?
While I’m at it, I’d like to change the appearance of the Buy and other Submit-type buttons, too, to make them purple… that’s something in the theme CSS I bet, but if you know because of the “Buy” button, please say something…
Finally, I’m not getting orders that I should be getting, – I’m assuming people are not clicking Buy – and I’m going to do a copy revision to make sure it’s just not people abandoning my process, but I’ve asked two who completed if they had any problems – no – but how do I know if no one else has had a problem placing an order? How would a store owner know if something wasn’t working?
About that… I also don’t know how to make shipping address and other details optional. These are virtual products, and people might not want to enter their street addresses, though I do still want city/state/country out of market interest.
The page I need help with: [log in to see the link]
-
Hey there!
You can change all of the elements in most any theme – including Twenty Seventeen. To do so, you’ll need to isolate the element to determine the class, and then change the associated CSS.
Here’s how to learn to find the different elements so you can style them:
https://developers.google.com/web/tools/chrome-devtools/css/Here’s how you’d track down that notification:
Link to image: https://cld.wthms.co/045EYXSo to change it, you’d need the following CSS, changing the background and color to whichever values you’d like:
`
.woocommerce-message {
background: teal;
color: #fff;
}
`You can indeed change the CSS on the fly by going to **Customize > Additional CSS** and then pasting in the code that you’d like to change:
Link to image: https://cld.wthms.co/AbNSs7You can use the same approach to modify other elements, including the buttons.
> how do I know if no one else has had a problem placing an order? How would a store owner know if something wasn’t working?
The best way to find out is to try to buy something from your shop yourself. That will let you work through the entire checkout process. You can always refund the order once you’ve made it.
> I also don’t know how to make shipping address and other details optional. These are virtual products, and people might not want to enter their street addresses, though I do still want city/state/country out of market interest.
If the order only contains digital items, then your site shouldn’t even ask for shipping details – when I tested this, the site only asked for billing details, as those are required to confirm payment. When I checked your site, this was the case as well.
If you don’t want to collect information such as street address, then you may want to take a look at our Checkout Field Editor, which will let you modify the fields that are shown:
https://www.woocommerce.com/products/woocommerce-checkout-field-editor/?aff=10486&cid=1173144Here are some more tips for selling digital goods:
https://woocommerce.com/posts/sell-digital-with-woocommerce/
- The topic ‘Simple styling of WooCommerce order information boxes’ is closed to new replies.
