Display custom div at 100% width on category pages - above the sidebar

Home Forums Jevelin Theme Display custom div at 100% width on category pages – above the sidebar

Home Forums Jevelin Theme Display custom div at 100% width on category pages – above the sidebar

Viewing 20 posts - 1 through 20 (of 21 total)
  • Author
    RESOLVED Posts
  • AkshayfromFaux
    Participant

    Hi team,

    Thanks a lot for the awesome theme!

    We are trying to customize the layout of the default woocommerce category pages. This is what we have done so far: https://watchersonline.shop/product-category/headwear/

    Below is the code snippet we are using in our functions.php to display these images on top of the headwear category page:

    /*
    * My Custom Function for Headwear Category Page
    */
    function headwear_img() {

    if ( is_product_category(‘headwear’) ) {
    echo ‘‘;
    echo ‘<div style=”display:block;”>


    <div style=”margin-right:1%; float:left; width:19%;”>

    <h2> Snapback </h2>
    </div>


    <div style=”margin-right:1%; float:left; width:19%;”>

    <h2> Fitted </h2>
    </div>


    <div style=”margin-right:1%; float:left; width:19%;”>

    <h2> Adjustable </h2>
    </div>


    <div style=”margin-right:1%; float:left; width:19%;”>

    <h2> Beanies </h2>
    </div>


    <div style=”margin-right:1%; float:left; width:19%;”>

    <h2> Bucket Hat </h2>
    </div>

    </div>’;
    }
    }

    add_filter( ‘woocommerce_archive_description’, ‘headwear_img’, 20 );

    This all is working perfectly fine. Just one problem though, we want this complete div (main banner + 5 thumbnails) to be at 100% width of the page. The products and the sidebar should start below it. (Please see the attachment)

    could you please let us know how can we achieve that?

     

    Thanks a ton

    Lavanya

    Attachments:
    You must be logged in to view attached files.

    Shufflehound
    Moderator

    Hi there,

     

    Sorry for our late response.

    We saw your website. Did you manage to fix it?

     

    Best regards,

    Shufflehound team

    AkshayfromFaux
    Participant

    Hi,

    Thanks a ton for your reply. No, it’s not yet resolved.

    We have reverted the CSS code we wrote for this because it was creating complications for other elements on the page.

    But yes, that was the desired look. could you please help us with this at the earliest? It will be highly appreciated.

    I also wanted to know which theme file should we edit in order to make changes to the category pages design.

    Looking forward to your reply
    Thank you!

    Shufflehound
    Moderator

    Hi there,

     

    To get your desired look you can do that in two ways:

    • overwrite archive.php from the child theme and add that code there
    • use jevelin_before_content action and create a function from the child theme that will add the content

    The function could look look like this:

    function jevelin_before_content_function() {
        if( is_shop() ) {
            // your content
        }
    }
    add_action('jevelin_before_content', 'jevelin_before_content_function');

    The action is added in the latest beta version below:


    Please login to access this file

     

    Hope that helps!

     

    Best regards,

    Shufflehound team

    • This reply was modified 3 months, 1 week ago by Shufflehound.
    • This reply was modified 3 months, 1 week ago by Shufflehound.
    • This reply was modified 3 months, 1 week ago by Shufflehound.
    • This reply was modified 3 months, 1 week ago by Shufflehound.
    • This reply was modified 3 months, 1 week ago by Shufflehound.

    AkshayfromFaux
    Participant

    Hi,

    Thanks a ton for your reply.

    We tried the second method. Here’s the screenshot of the code we added in our functions.php file for your reference. But it did not work.

    View post on imgur.com

    https://watchersonline.shop/shop/
    https://watchersonline.shop/product-category/sale/

    Could you please check and let us know if we are doing something wrong or missing anything?

    This said, thanks for sharing the file name too, but how can we display different images for different categories from there?

     

    Looking forward to hearing from you
    Thanks & Regards

    AkshayfromFaux
    Participant

    The picture that is appearing on the shop page is because of the following code:

    View post on imgur.com

    View post on imgur.com


    The code above is still there in the functions.php file, but nothing is showing.

    Shufflehound
    Moderator

    We tested it and it was working fine for us.

    Can you please confirm that you updated the theme to the attached file?

    AkshayfromFaux
    Participant

    Hi team,

    Thanks a ton!

    It’s working perfectly.

    could you please help us with one more thing, i.e all our cart buttons and says “Basket” instead of the word “cart”. could you please let us know where in the theme settings or code we can change it to “cart” in one go?

    It’d be really appreciated.

     

    Thank you!

    Shufflehound
    Moderator

    Hi there,

     

    Sorry for our late response.

     

    It seems that we can’t find any hardcoded strings with name – Basket, so it seems that that text isn’t hardcoded in our theme.

    Can you please add a screenshot with a places where you see that name?

     

    Best regards,

    Shufflehound team

    AkshayfromFaux
    Participant

    Hi team,

    Thank you for the response!

    Here’s the requested screenshot: https://imgur.com/a/LYBWYhM

    Also, we are using a plugin for displaying products in a slider. The “add to cart” buttons text turn to “Add to basket” when we click on them. And this problem is not specific to one plugin but happens with all of them.

    This said, we also imported one of the jevelin demos if that helps you debug this issue further.

    Thanks a ton!

    Shufflehound
    Moderator

    Interesting, we have word cart instead of the word basket.

     

    Maybe you don’t use default WordPress language?

    AkshayfromFaux
    Participant

    sorry, I don’t understand the question.

    Shufflehound
    Moderator

    Is your site language – English (United States)?

    AkshayfromFaux
    Participant

    Yes, it is. Sorry for the late reply.

    Shufflehound
    Moderator

    Oh, then we are not sure why you would have basket instead of the cart.

    At the moment the only idea what we found is this tutorial.

    • This reply was modified 1 month, 3 weeks ago by Shufflehound.

    AkshayfromFaux
    Participant

    Thanks a ton!

    It’s solved.

    We see “cart” now everywhere instead of the word “Basket”.

     

    This said and done, could you please help us hide the mini cart from our website?

    we don’t really need that.

     

    Thank you!

    Shufflehound
    Moderator

    That is great! 🙂

     

    To hide the header cart you can try to go to the – Jevelin Settings (at the topbar) > Header > Header Elemnets, uncheck the WooCommerce Cart and save it.

     

    Let us know if that works!

    AkshayfromFaux
    Participant

    Hi!

    Thanks for your reply.

    But we don’t want to hide the cart, but the dropdown that appears when you hover over it (in case of desktop only).

    here’s the screenshot for your reference: https://imgur.com/a/y93zh06

    Looking forward to your reply
    Thank you!

    Shufflehound
    Moderator

    Oh, in that case you can try this CSS snippet:

    li.sh-nav-cart ul.sub-menu {
        display: none!important;
    }

     

    Let us know if that works! 🙂

    • This reply was modified 1 month, 2 weeks ago by Shufflehound.

    AkshayfromFaux
    Participant

    It works! Thank you so much! 🙂

Viewing 20 posts - 1 through 20 (of 21 total)