Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 18, 2024 at 5:32 am #1473855
    Dzimnikov

    Hi, here is the website I’m working on: https://www.bonjiglass.com/shop/

    As you can see, I added “Free Shipping on All Orders to the area below the review slider.

    Ideally, I’d love to give its own section below, where the breadcrumbs section currently is. Is there a way for me to do this? I want to make it abundantly clear to people coming to the shop page that shipping is free!

    Thank you so much in advance!

    December 18, 2024 at 6:59 am #1473870
    Ismael

    Hey Dzimnikov,

    Thank you for the inquiry.

    Try to add this script in the functions.php file to create another container below the product description or shop banner :

    function ava_custom_add_shipping_text_script() { 
    if (is_shop()) { 
    ?>
        <script>
            (function ($) {
                $(document).ready(function () {
                    var newContainer = $('<div class="av-custom-shipping-container"><p>Free Shipping on All Orders!</p></div>');
                    $('#av_product_description .container').after(newContainer);
                });
            }(jQuery));
        </script>
    <?php 
    }
}
add_action('wp_footer', 'ava_custom_add_shipping_text_script', 99);

    Then add this css code to adjust the style of the new container:

    #top .av-custom-shipping-container {
    background: red;
    padding: 20px;
}

#top .av-custom-shipping-container p {
    color: #ffffff;
    font-size: 40px;
}

    Best regards,
    Ismael

    December 19, 2024 at 12:56 am #1473961
    Dzimnikov

    Thank you. I almost got it, but it appears like this section was built over that overall section with the rotating slider… and so is inheriting the black overlay.

    Is there a way to remove that overlay from just this new Free Shipping Section.. so that it pops. Its super dull atm:
    https://www.bonjiglass.com/shop/

    Also, on mobile, the words overlap… needs spacing between the lines I think.

    • This reply was modified 4 days, 7 hours ago by Dzimnikov.
    December 19, 2024 at 5:33 pm #1474017
    Mike

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top .av-custom-shipping-container {
    z-index: 9;
    position: relative;
}
@media only screen and (max-width: 735px) { 
	#top .av-custom-shipping-container {
	line-height: 65px;
	}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    December 21, 2024 at 3:49 am #1474097
    Dzimnikov

    Amazing, thank you, thank you, thank you!!!

    December 21, 2024 at 6:11 am #1474098
    Dzimnikov

    One more question. If I want to add an extra line of text below “Don’t Forget to Use Your Discount Codes”, how would I do that?

    I don’t know PHP code at all, I don’t want to break anything

    December 21, 2024 at 2:21 pm #1474106
    Mike

    Hi,
    Try changing your script to this:

    function ava_custom_add_shipping_text_script() { 
    if (is_shop()) { 
    ?>
        <script>
            (function ($) {
                $(document).ready(function () {
                    var newContainer = $('<div class="av-custom-shipping-container"><p>Free Shipping on All Orders!</p><p>Don’t Forget to Use Your Discount Codes</p></div>');
                    $('#av_product_description .container').after(newContainer);
                });
            }(jQuery));
        </script>
    <?php 
    }
}
add_action('wp_footer', 'ava_custom_add_shipping_text_script', 99);

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.