January 11

Using XStore theme to customize ELEX WooCommerce Dynamic Pricing and Discounts Plugin

For your online store, giving your customers discounts and offers from time to time is an important marketing and promotional feat. Moreover, simply giving away the discounts in not enough, it is important to convey the discounts to your customers in a compelling manner. It’s not always the numbers, that your customers are after, it’s sometimes the message that gets the customer more excited to go for the discounted product. Moreover, you would also want to make sure that your customer is aware of all the possible discounts associated with the product. If you are using the ELEX WooCommerce Dynamic Pricing and Discounts Plugin, this article would help you in customization and highlights some of the tricks that can help you convey your offer messages to your customers using some of the XStore theme features. 1. Customizing the Shop Page 2. Pricing Table Customization 3. “Sale” badge customization.

Customizing the shop page

With the "One-click Import" feature, you can easily import any demo from among all the elegantly powerful demos available to be used at your site. For the purpose of illustration, we have imported the "Kids" demo.

Now, after you configure discount rules for your products, let’s take a look at the “Shop” page. Let’s assume you have the following rules in place –

The shop page would appear as the following –

The product for which the discount rules have been setup has the “Sale” badge. The theme has an inherent feature by which you can enable the “Catalog Mode” which will hide the “Add to Cart” buttons corresponding to each product. You can further customize the “Shop” page by changing the display of the “Sale” badge. Replacing “Sale” text with the discount amount might increase the chance of getting it easily noticed by customers.

Pricing Table Customization

ELEX WooCommerce Dynamic Pricing and Discounts Plugin comes with a default Pricing table in the Product page, which is meant to display all the product discount rules associate with the particular product. The default look of the pricing table is simple and neat. Yet, it might not always go with the common design trend which is being followed in your entire site. Leaving one element out of design might not serve well to your customer base. By default, this is how the pricing table would look like -

Now, thanks to the WP Bakery, which is included in the XStore theme, you can easily customize the Pricing Table by adding some custom CSS. For instance, in order to get the below result,

You need to add the following code snippet –

table {
 border-collapse: collapse;
 width: 100%;
}
th, td {
    text-align: left;
    padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
.xa_sp_table_head2_cell {
    background-color: #CCCC00;
    color: white;
}

Similar to this, you can add any other preferred styles.

“Sale” badge customization

With the XStore theme, you can add, remove, customize the “Sale” badge. The color, text of the Sale badge is quite important in making the discount appeal to your customers. XStore provides the easy way to achieve this from Customization -> E-Commerce -> Shop.