Using the Elementor Site Settings, you can quickly customize many of the aspects of your site related to WooCommerce. This helps you work more efficiently and maintain consistency throughout your site.
There are two ways to access these settings:
- Through the Elementor Editor
- Through the Hello Commerce section of WP Admin
To access Site Settings through the Elementor Editor:
- Open any of your site’s pages in Elementor.
In this example, we’ll open the home page from WP Admin.
- In the top toolbar, click the Site Settings icon.
- In the left panel, click Hello Commerce.
This opens the settings panel. The settings panel is divided into three parts:
- Woo Buttons: Buttons related to WooCommerce such as the “Add to Cart” button.
- Woo Prices: Prices that you control through WooCommerce. These are the prices you enter when creating or editing products.
- Sales Flash: Also known as a sales badge, this is a visual indicator that appears on product images or listings to show that a product is on sale. You create a sales flash by editing a product.
See Settings below for a full explanation of all the options available.
To access Site Settings through the Elementor Editor:
- Go to WP Admin.
- Navigate to the Hello Commerce section of WP Admin.
- In the right pane, in the Shop Style section, choose one of the three site settings:
- Woo Buttons: Buttons related to WooCommerce such as the “Add to Cart” button.
- Woo Prices: Prices that you control through WooCommerce. These are the prices you enter when creating or editing products.
- Sales Flash: Also known as a sales badge, this is a visual indicator that appears on product images or listings to show that a product is on sale. You create a sales flash by editing a product.
Change a setting – Step by Step
- Open a page in the Elementor Editor
- Click the Site Settings icon.
- Click Hello Commerce.
The settings open with the Woo Buttons section open.
- Click the pencil icon
next to Typography.
- Change the Family to Quintessential. For details about fonts, see Typography.
- Click Save Changes.
Now, if you go to product pages or the shopping cart, the Woo Buttons will use the Quintessential font.
See a video demonstrating the widget in action.
The Site Settings
You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.
Typography
Set the font type and size. For details, see Typography.
Normal/Hover
- Normal: Determine how the buttons appear by default.
- Hover: Determine how the buttons appear when moused over.
Text Color
Set the color of the words on the button. For details, see Choose a color or Use global fonts and colors.
Background type
Use the to switch between a solid background (Classic) or a blended background (Gradient). For details, see Create a Background.
Color
Set the color of the button. For details, see Choose a color or Use global fonts and colors.
Border
You have the option of adding a border to the buttons. Toggle to Yes to add a border.
If you add a border, you’ll need to determine:
- Border Width: Use the slider to determine the border’s thickness.
- Color: Add color to the border. For details, see Choose a color or Use global fonts and colors.
- Round: Buttons appear with smooth corners.
- Rounded: Buttons appear with evenly curved edges.
- Sharp: Rectangular buttons.
- Custom: Adjust the radius, using the four counters to adjust each individual corner. Learn more about these measurement methods.
- Shape: When using a button use the dropdown menu to select:
- Box shadow: Add depth to your buttons with shadows. For details, see What is Shadow, Text Shadow and Boxed Shadow?
Padding
Create spacing inside the buttons.
For details, see Padding and margins.
Typography
Set the font type and size of the prices. For details, see Typography.
Text Color
Set a color for product prices. For details, see Choose a color or Use global fonts and colors.
Typography
Set the font type and size of the sale prices. For details, see Typography.
Text color
Set a color for sale prices. For details, see Choose a color or Use global fonts and colors.
Background Color
Help make sale prices stand out by adding a background. For details, see Create a Background.
