Home Forums WoodMart support forum Customize product category page

Customize product category page

Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #263101

    Javi24
    Participant

    Hello,

    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.
    #263119

    Hello,

    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

    #263195

    Javi24
    Participant

    Hello,

    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.
    #263521

    Hello,

    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

    #263562

    Javi24
    Participant

    Hello,

    Now looks good.

    Some questions have been added to the link:
    https://prnt.sc/y5cyzp
    https://prnt.sc/y5eleg

    #263659

    Hello,

    You need to add the styles to .wrapp-category:focus

    Do you need custom CSS?

    Best Regards

    #264032

    Javi24
    Participant

    Hello 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

    #264234

    Hello,

    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

    #264248

    Javi24
    Participant

    Hello,

    Now looks good. I want to add a border for products too. (like categories)

    Thank you!

    #264403

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    body .product-grid-item .product-wrapper{
    	border: 1px solid red;
    }

    Best Regards

    #264475

    Javi24
    Participant

    Hello,

    1. I add this code, but nothing happened. Did not add to the border for products
    https://prnt.sc/ykedun

    2.Product category there is no hover. How to add this? https://prnt.sc/ykfk2o
    Product category hover example: https://hammerjack.eu/tooted/kinnitusvahendid

    #264731

    Hello,

    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

    #264796

    Javi24
    Participant

    Hello,

    I send site admin access.

    Best Regards

    #265238

    Hello,

    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

    #265287

    Javi24
    Participant

    Hello,

    I would also like answers to other questions. Questions are in a private area.

    Best Regards

    #265702

    Hello,

    /*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 > Categories

    This 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 widget

    2. 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

    #266004

    Javi24
    Participant

    Hello

    How to add quantity box height 50 px?
    https://prnt.sc/z94o1g

    Best Regards

    #266061

    Hello,

    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

    #266491

    Javi24
    Participant

    Hello,

    In desktop view its working correctly but in mobile view nothing change, if I change .single_add_to_cart_button { width

    #266695

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Mobile:

    div.quantity input[type=number] {
        width: 50px;
        height: 50px;
    }

    Best Regards

    #266739

    Javi24
    Participant

    Hello,

    If I use Show summary on hover style it’s possible to add quantity tab too?
    https://prnt.sc/zmeqhd

    Thanks for your help!

    #266811

    Hello,

    Quantity is available for Quick and for Standard buttons only.

    If you have any questions please feel free to contact us.

    Best Regards

    #268148

    Javi24
    Participant

    Hello,

    How to change product grid add to cart and quantity colour. https://prnt.sc/102owke

    Best Regards

    #268179

    Hello,

    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

Viewing 24 posts - 1 through 24 (of 24 total)