Code Snippets

Use this snippet to add a badge/ribbon that only shows when a product is featured

STEP 1 - Template Override
If you havent already got then copy the original files and paste them in the location specified ready to edit.

Using a file manager or FTP navigate to and copy this file
>>"public_html/components/com_virtuemart/sublayouts/products.php"
Paste the file in
>>"public_html/templates/YOUR-TEMPLATE-NAME/html/com_virtuemart/sublayouts"
(Only if there isnt one there already, if there is please dont replace it)

STEP 2 - The Code
Find the following code in your file "public_html/templates/YOUR-TEMPLATE-NAME/html/com_virtuemart/sublayouts/products.php"
(This is the file you just pasted into this directory)
CODE

<div class="spacer product-container" data-vm="product-container">

 PASTE THIS CODE DIRECTLY BELOW

<?php if (!empty($product->product_special) && $product->product_special == 1) : ?>
<div class="fbadge"> <span class="vm-featured-badge">ON SALE</span></div>
<?php endif; ?>

STEP 3 - ADD CSS
(this can be added in your custom.css file or if your template has a custom code option you can add it there)

.fbadge {
height: 44px;
width: 150px;
position: absolute;
right: -2px;
top: 0;
background: #3352a2;
font-size: 11px;
font-weight: 700;
padding: 5px 48px;
z-index: 9999999999;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 0px 5px 0px 0;
display: block;
border: 2px solid #e5e5e5;
-webkit-transform: skewY(33deg);
-moz-transform: skewY(33deg);
-ms-transform: skewY(33deg);
-o-transform: skewY(33deg);
transform: skewY(33deg);
}
.spacer.product-container {
position: relative;
overflow: hidden;
}
.vm-featured-badge {
color: #fff !important;
text-align: center;
position: absolute;
color: #fff;
font-size: 20px;
font-weight: 500;
padding: 1px 0;
z-index: 99999;
text-transform: uppercase;
letter-spacing: 1px;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-ms-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);
margin-left: 2px;
}


(your css will need to be edited slightly to match your style and template)

Now you should have the badge / ribbon showing on any product that is selected to be featured in VirtueMart Product Manager

Image
Image