Home › Forums › WoodMart support forum › Customize product category page
Customize product category page
- This topic has 23 replies, 2 voices, and was last updated 3 years, 11 months ago by Elise Noromit.
-
AuthorPosts
-
February 1, 2021 at 9:01 pm #263101
Javi24ParticipantHello,
How to make a product category style – hover, category title clickable and title in the middle?
Like in the picture.
Attachments:
You must be logged in to view attached files.February 1, 2021 at 11:20 pm #263119
Elise NoromitMemberHello,
You can set the category styles in the Theme Settings > Shop > Categories style.
If you use the Product Category element you will find the option inside the element.
Please let me know what exactly you want to change. If the options provided are not enough.
Best Regards
February 2, 2021 at 9:10 am #263195
Javi24ParticipantHello,
I use an Alternative style, but the title is not clickable. And no free space between categories.
Attachments:
You must be logged in to view attached files.February 3, 2021 at 11:43 am #263521
Elise NoromitMemberHello,
Please add this code to the Theme Settings > Custom CSS > Global:
body .cat-design-alt .category-link { display: block; }
Please remove this custom: https://prnt.sc/y55arb
Use this class to add borders and gaps:
wrapp-category
Best Regards
February 3, 2021 at 1:16 pm #263562
Javi24ParticipantHello,
Now looks good.
Some questions have been added to the link:
https://prnt.sc/y5cyzp
https://prnt.sc/y5elegFebruary 3, 2021 at 5:30 pm #263659
Elise NoromitMemberHello,
You need to add the styles to
.wrapp-category:focus
Do you need custom CSS?
Best Regards
February 4, 2021 at 9:27 pm #264032
Javi24ParticipantHello Elise,
I add .wrapp-category:focus in global custom css, but nothing happend.(only removed sidebar border)
Looks i need help with custom css yes. Its possible you help me ? 🙂
Best Regards
February 5, 2021 at 2:34 pm #264234
Elise NoromitMemberHello,
Please add this code to the Theme Settings > Custom CSS > Global:
.product.category-grid-item .category-title { line-height: 24px; min-height: 48px; } .product.category-grid-item:focus .wrapp-category, .product.category-grid-item:active .wrapp-category { border-color: red !important; } .product.category-grid-item:focus .category-title, .product.category-grid-item:active .category-title { text-decoration: underline; }
Best Regards
February 5, 2021 at 3:18 pm #264248
Javi24ParticipantHello,
Now looks good. I want to add a border for products too. (like categories)
Thank you!
February 6, 2021 at 11:55 am #264403
Elise NoromitMemberHello,
Please add this code to the Theme Settings > Custom CSS > Global:
body .product-grid-item .product-wrapper{ border: 1px solid red; }
Best Regards
February 6, 2021 at 10:23 pm #264475
Javi24ParticipantHello,
1. I add this code, but nothing happened. Did not add to the border for products
https://prnt.sc/ykedun2.Product category there is no hover. How to add this? https://prnt.sc/ykfk2o
Product category hover example: https://hammerjack.eu/tooted/kinnitusvahendidFebruary 8, 2021 at 11:54 am #264731
Elise NoromitMemberHello,
Please provide your site admin access to the private area.
The page you refer is not a Product category grid element. I will check and suggest.
Best Regards
February 8, 2021 at 3:09 pm #264796
Javi24ParticipantHello,
I send site admin access.
Best Regards
February 10, 2021 at 8:30 am #265238
Elise NoromitMemberHello,
Sorry for the delay.
I double-checked and see, unfortunately, it is not possible, you can set bordered grid or set Tiled hover design in the Theme Settings > Shop > Product style.
Best Regards
February 10, 2021 at 10:29 am #265287
Javi24ParticipantHello,
I would also like answers to other questions. Questions are in a private area.
Best Regards
February 11, 2021 at 3:47 pm #265702
Elise NoromitMemberHello,
/*1*/
body .product.category-grid-item:hover .wrapp-category, body .product.category-grid-item:focus .wrapp-category, body .product.category-grid-item:active .wrapp-category { border-color: red !important; box-shadow: 0px 0px 5px 5px rgb(0,0,0,0.4); } body .product.category-grid-item:hover .category-title, body .product.category-grid-item:focus .category-title, body .product.category-grid-item:active .category-title { text-decoration: underline; }
/*2*/
You can add the category description in Dashboard > Products > CategoriesThis is the only way to add the description.
/*3*/
You can change the breadcrumbs location in product page: Theme Settings > Product page. > show /hide/*4*/
you can set bordered grid or set Tiled hover design in the Theme Settings > Shop > Product style./*5*/
Please read and follow the instruction: https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid//*7*/ /*6*//*9*/
By default Woocommerce does not provide the option. Such modification requires customization not covered by our support./*8*/
body .single_add_to_cart_button { width: 81%; }
/*10*/
1. Create custom Sidbar in Appearance > Sidebar add Product cloud widget2. Create HTML widget
2. Add the Widgetized Sidebar element and choose a custom sidebar
3. Add the HTML block to the place where you want to show the tags.
/*11*/
You can find the option in the Theme Settings > Product Paga > Tabs > Switch to the accordion.Best Regards
February 12, 2021 at 7:50 pm #266004
Javi24ParticipantFebruary 13, 2021 at 12:12 am #266061
Elise NoromitMemberHello,
Please add this code to the Theme Settings > Custom CSS > Global:
div.quantity input[type=button] { padding: 0 5px; min-width: 25px; height: 42px; } div.quantity input[type=number] { width: 30px; height: 42px; }
Please change the values as per your needs.
Best Regards
February 14, 2021 at 8:33 pm #266491
Javi24ParticipantHello,
In desktop view its working correctly but in mobile view nothing change, if I change .single_add_to_cart_button { width
February 15, 2021 at 1:36 pm #266695
Elise NoromitMemberHello,
Please add this code to the Theme Settings > Custom CSS > Mobile:
div.quantity input[type=number] { width: 50px; height: 50px; }
Best Regards
February 15, 2021 at 4:20 pm #266739
Javi24ParticipantHello,
If I use Show summary on hover style it’s possible to add quantity tab too?
https://prnt.sc/zmeqhdThanks for your help!
February 15, 2021 at 9:37 pm #266811
Elise NoromitMemberHello,
Quantity is available for Quick and for Standard buttons only.
If you have any questions please feel free to contact us.
Best Regards
February 21, 2021 at 10:37 am #268148
Javi24ParticipantHello,
How to change product grid add to cart and quantity colour. https://prnt.sc/102owke
Best Regards
February 21, 2021 at 4:01 pm #268179
Elise NoromitMemberHello,
You need to change the Prime color in the Theme Settings > Styles and colors.
If you want to change only add to cart button and do not want to change the Prime color,
Please add this code to the Theme Settings > Custom CSS > Global:
body .btns-shop-dark .single_add_to_cart_button, body .woodmart-hover-quick .woodmart-add-btn > a{ background-color:red; }
Set the color as per your needs.
Best Regards
-
AuthorPosts
- You must be logged in to create new topics. Login / Register