Show Original (Alternative) Price Tutorial E-commence Blogger Store

With the flexibility of BlogrCart Closet responsive mobile 1st Blogger store theme, blogger store owners can easily include an original (or alternative) price at product post or display it on the product gallery pages. Using this feature, blogger store owners can enhance their products offered to their users & hopefully (but surely) build more sales lead.

Find below the necessary addition(s) to allow to display an "Original Price" (the alternative price) text/tag which Blogger store owners can edit for each products at their Blogger store.

A working example page using an "Original Price" tag/text is located here at http://blogrcart-closet.blogspot.com/2014/12/adding-highlighted-paragraphs-using.html

Note: In order to display the alternative price tag for previous Product Post pages, blogger owners are required to edit each post manually. Use guideline below as reference.


Here is the step-by-step guide to easily install an alternative price aka "Original Price" at BlogrCart Closet responsive Blogger store theme.

Insert the Alternative "Original Price" Editing Box

Go to Settings > Post and Comments > and at Post Template find below codes:-

<tr> 
  <td class="item_price">$ 45.00</td>
</tr>

Now edit the above codes so it should look like below:-

<tr class="custom_price">
  <td class="item_price">$ 25.00</td>
</tr>
<tr class="custom_price">
  <td class="label_original_price">
    <span class="label_original">Original Price</span> $ 145.00
  </td>
</tr>

And click Save Settings to save your changes. The highlighted in yellow are the additional codes which was added.

To view the changes, Click the Pencil button to start a New Post and you can view another price below the product price box is included. Edit the required text/integer after "Original Price".

You can edit the "Original Price" text to whatever text you want to display. But always make sure that the "Original Price" text is surrounded within a <span class="label_original">... </span> tag.

Adding the CSS specific Styles

In order to let the "Original Price" to display accordingly to your new setup, add below codes BEFORE/ABOVE </head> in your Template Editor:-

<!-- custom index post styles -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static&quot;'>
<style>
.gallery-product { min-height:400px; }
.product-description { bottom:-20px; }
.label_original_wrapper { width:100%; }
.custom_price { padding-right:20px; display:inline-block!important; *display:inline!important; width:auto!important; }
.label_original_price { display:inline-block; *display:inline; text-decoration: line-through; color:red; }
span.label_original { display:inline-block!important; border:0 none!important; height:1px!important; display:none!important; }

</style>
</b:if>
</b:if>

<!-- custom product post styles -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.label_original_price, span.label_original { text-decoration: line-through; color:red; }
.custom_price { padding-right:20px; display:inline-block!important; *display:inline!important; width:auto!important; }

</style>
</b:if>
</head> <!-- YOUR REFERENCE -->

Click Save Template and view your changes. Of course, there will be none, but once you have start editing the new Auto Post Template with the Added codes above, then the "Original Price" will display in both Product Gallery & Product Post.

Some Quick Explanations

The first part (highlighted orange) are conditional codes for adding styles to the "Original Price" tag at gallery pages & the later (in highlighted cyan) are conditional codes to add styles only at product post pages.
Show Original (Alternative) Price Tutorial E-commence Blogger Store Show Original (Alternative) Price Tutorial E-commence Blogger Store

Không có nhận xét nào

Đăng nhận xét

Subscribe Our Newsletter

Get the latest OFFERS right to your mail.