Home Forums WoodMart support forum Change the product style of “Standard Button”

Change the product style of “Standard Button”

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #606637

    adrianaliv.diseno
    Participant

    I want to change the product style/archive of “Standard Button”

    First I would like the content to be aligned to the left, second I would like the category to be first and then the title, and third I would like the button to have a border around it with no background and the hover to remain with a colored background. Can you help me?

    Thank You!

    #606772

    Hung Pham
    Keymaster

    Hello adrianaliv.diseno,

    Thanks for reaching to us.

    1. I see the content are aligned to left, please let me know if you resolved it.

    2. Categories order

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

    .wd-product .wd-product-cats {
    	order: 1;
    }
    
    .wd-product .wd-entities-title {
    	order: 2;
    }
    
    .wd-product span.price {
    	order: 3;
    }

    3. Button

    If you want to have no background color then which color you want to change for text to make it visible?

    Regards,

    #606950

    adrianaliv.diseno
    Participant

    Your code worked but not correctly, since the button now appears first and I would like it to stay at the end, as it was, I want this order:

    category, title, price, button.

    And the text aligned to the left is no longer working, I don’t know if you could help me with that,

    about the button, I would like it to be like the attached image, the orange color would be: #F1684B

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

    Bogdan Donovan
    Keymaster

    Hi,

    To change the product design according to your preferences, please follow these steps:

    1. Remove the custom code provided in the previous message.
    2. Add the following code to the Global Custom CSS area located in Theme Settings.

    .wd-hover-standard .product-wrapper {
    	text-align: left;
    	--text-align: left;
    }
    
    .wd-hover-standard .product-wrapper > .product-element-top {
    	order: 0;
    }
    
    .wd-hover-standard .product-wrapper > .wd-product-cats {
    	order: 1;
    }
    
    .wd-hover-standard .product-wrapper > * {
    	order: 2;
    }
    
    .wd-product.wd-hover-standard .wd-add-btn > a {
    	border: 1px solid var(--btn-accented-bgcolor);
    }
    
    .wd-product.wd-hover-standard .wd-add-btn > a:not(:hover) {
    	background: transparent;
    	color: var(--btn-accented-bgcolor);
    }
    
    .wd-product.wd-hover-standard .wd-add-btn > a:hover {
    	border-color: var(--btn-accented-bgcolor-hover);
    }

    By default, the product button color matches the accent buttons color, which is set in Theme Settings → Styles and Colors → Buttons. If, for any reason, you want the product button color to be different from others, add the following code to Global Custom CSS, making sure to specify your own colors for the idle and hover states of the button.

    .wd-product.wd-hover-standard .wd-add-btn > a {
        --btn-accented-bgcolor: green;
        --btn-accented-bgcolor-hover: red;
    }
    #609917

    adrianaliv.diseno
    Participant

    The category is not displayed as I want, it is the same as the theme design, please I want it to be CATEGORY > TITLE > PRICE > BUTTON.

    #609942

    Bogdan Donovan
    Keymaster

    Hello,

    Try to replace the previous code with the following code:

    .wd-hover-standard .product-wrapper {
    	text-align: left;
    	--text-align: left;
    }
    
    .wd-hover-standard .product-wrapper  > .product-element-bottom > .wd-product-cats {
    	order: 0;
    }
    
    .wd-hover-standard .product-wrapper > .product-element-bottom > * {
    	order: 1;
    }
    
    .wd-product.wd-hover-standard .wd-add-btn > a {
    	border: 1px solid var(--btn-accented-bgcolor);
    }
    
    .wd-product.wd-hover-standard .wd-add-btn > a:not(:hover) {
    	background: transparent;
    	color: var(--btn-accented-bgcolor);
    }
    
    .wd-product.wd-hover-standard .wd-add-btn > a:hover {
    	border-color: var(--btn-accented-bgcolor-hover);
    }

    Kind Regards

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