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
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
Hi there,
Sorry for our late response.
We saw your website. Did you manage to fix it?
Best regards,
Shufflehound team
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!
Hi there,
To get your desired look you can do that in two ways:
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
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.
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
The picture that is appearing on the shop page is because of the following code:
https://imgur.com/a/0IBxTDw
https://imgur.com/a/2IFXKm3#3cuiHOx
The code above is still there in the functions.php file, but nothing is showing.
We tested it and it was working fine for us.
Can you please confirm that you updated the theme to the attached file?
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!
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
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!
Interesting, we have word cart instead of the word basket.
Maybe you don’t use default WordPress language?
sorry, I don’t understand the question.
Is your site language – English (United States)?
Yes, it is. Sorry for the late reply.
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.
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!
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!
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!
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! 🙂
It works! Thank you so much! 🙂