Developer Docs

Ultimate Woo Customizer Documentaion

Build Your Own Custom Woo Website

Ultimate Woo Customizer allows you to fully alter the appearance, layout and functionality of your WooCommerce store

After installing and activating

1 Product page settings

After activating navigate to WooCommerce>>Ultimate Woo Customizer. You’ll see the settings page is broken into 5 sections. Product page, shop page, cart page, checkout page and miscellaneous.

Let’s start with the product page settings.

The product page is also broken into 5 sections for easier navigation

1. Add to cart button

2. Product heading

3. price

4. Tabs

5. Additional settings


1.1 Product page add to cart


Most of the settings are pretty self-explanatory, but we’ll run through each one.

1. Add to cart text. 

If you don’t like the default wording for the add to cart button you can change it here.

2. Add to cart top and bottom gradient.

In the free version this section is replaced with background color.  This option allows you to create a vertical background gradient for the add to cart button. This offers a much more professional and cleaner look than solid colours. Should you decide to have one colour on the pro version simply select the same colour for both top and bottom. You can manually enter the hex code or you can use the colour picker. On hover the gradients will reverse.

3. Add to cart padding.

To add padding to the button simply enter the values in the position shown. eg. enter 10 in the top field and it will add 10px padding to the top of the button. Padding and margins are different. Adding margin will move the entire button away from its neighbouring element while adding padding will expand the area. This is great for making the button bigger.

4. Add to cart font.

Select your font here. In the free version you have a choice of web safe fonts. The pro version has a huge selection of Google fonts. Make sure that you aren’t blocking Google fonts with another plugin if you wish to use a Google font

5. Add to cart font colour and colour on hover.

Changing the colour here will change the colour of the font. If you decide to use a white background with a coloured border a font colour matching the border will look very nice here. The colour selection here will also affect the colour of any icon you add to the button. The hover selection will change the colour of the font when it’s hovered

6. Button border-radius.

Set the radius of the button. You can have a square button, or add a nice rounded corner with 5px or 10px radius. If you want a pill shape simply select a larger number and it will turn the shape to rounded ends.

7. Add to cart border width.

If you decide to use a border you can set the width in pixels here. If left to 0 or empty no border will display.

8. Border colour.

If the border width is set you can set the width in pixels of the border. Border width must be set to show border colour.

9. Border style.

If Border width is set you can pick a border style here. Note. Nothing will show unless border width is set.

10. Ad to cart icon.

In the free version you can add a solid cart icon. The pro version has an additional 12 icons to choose from, some being custom cart icons

11. Add to cart font size.

Set the font size for your add to cart text here. The font size selected here will apply to the icon as well.

12. Add to cart text style.

This option will set how the text is displayed. Lowercase, capitalized or uppercase. If a Google font only uses one case this will not be able to override it.

13. Quantity select font size.

If the quantity input looks small compared to the add to cart button you can adjust the input font size here to even it out. This can make the page look much more professional.

14. Add to cart button animation.

You can add some cool animations to the add to cart button. Hover over an image to see how it looks. the ta-da animation will only animate on page load while the others will animate continually until hovered.

1.2 Product heading

1.3 Price settings

1.4 Product tabs section

1.5 Additional settings

Your Title Goes Here

Shop Page Settings

1. Shop page settings

Cart Page Settings

1. Cart page settings

Request a Feature or Open a Ticket

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ready To Get Started?

Select your currency
USDUnited States (US) dollar
EUR Euro