Step 1: Add CSS for the Banner
Add the following CSS to your theme's style.css file:
/* Style for the vertical banner */
.vertical-banner-container {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 200px; /* Adjust the width as needed */
    background: #f8f8f8; /* Adjust background color as needed */
    border: 1px solid #ddd;
    z-index: 9999;
}

.vertical-banner img {
    width: 100%;
    height: auto;
}

Step 2: Add HTML for the Banner in functions.php

Add the following PHP code to your theme’s functions.php file to display the banner on specific pages:

function add_vertical_banner() {
    if (is_page(array('k-beauty', 'skincare-2', 'by-concern/anti-aging', 'by-concern/brightening-glow', 'by-concern/hydrating', 'by-concern/skin-barrier-acne-blemishes', 'by-concern/shrinks-pores-dullness', 'makeup', 'cleanser', 'sunscreen', 'masks', 'hair-body-care', 'mens', 'gift-sets', 'beauty-device'))) {
        echo '<div class="vertical-banner-container">
                <div class="vertical-banner">
                    <center><img src="/wp-content/uploads/2024/07/cosmetic-vertical-top5.jpg" alt="Banner 0"></center>
                    <a href="https://giantsmarket.ca/product/mediheal-watermide-essential-mask-%eb%a9%94%eb%94%94%ed%9e%90-%ec%9b%8c%ed%84%b0%eb%a7%88%ec%9d%b4%eb%93%9c-%ec%97%90%ec%84%bc%ec%85%9c-%eb%a7%88%ec%8a%a4%ed%81%ac/"><img src="/wp-content/uploads/2024/07/cosmetic-vertical-01.jpg" alt="Banner 1"></a><br/>
                    <a href="https://giantsmarket.ca/product/apieu-pore-primer-30ml/"><img src="/wp-content/uploads/2024/07/cosmetic-vertical02.jpg" alt="Banner 2"></a><br/>
                    <a href="https://giantsmarket.ca/product/missha-vita-c-eraser-toning-cream-30ml/"><img src="/wp-content/uploads/2024/07/cosmetic-vertical03.jpg" alt="Banner 3"></a><br/>
					<a href="https://giantsmarket.ca/product/%ec%8a%a4%ed%82%a8%ed%91%b8%eb%93%9c-carrot-caliming-pad-250ml/"><img src="/wp-content/uploads/2024/07/cosmetic-vertical04.jpg" alt="Banner 4"></a><br/>
					<a href="https://giantsmarket.ca/product/cosrx-snail-92-all-in-1-cream-100g/"><img src="/wp-content/uploads/2024/07/cosmetic-vertical05.jpg" alt="Banner 5"></a>
                </div>
              </div>';
    }
}
add_action('wp_footer', 'add_vertical_banner');

By admin

Leave a Reply

Your email address will not be published. Required fields are marked *