Home › Forums › WoodMart support forum › Change sizing selection

Change sizing selection

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 19, 2018 at 11:09 am #97021

    pogopie
    Participant

    Hello,
    Where can i change the design of the sizing ?
    From these underlined to a square with fill when selected.
    Do I need to make and svg ? or can i set it somewhere?
    Because when i upload and image, then its just round, with the image
    Please view image as reference.
    Thanks

    Attachments:
    You must be logged in to view attached files.
    December 19, 2018 at 12:45 pm #97055

    Elise Noromit
    Member

    Hello,

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

    body .swatches-select> .active-swatch {
    border: 1px solid  #000000;
	background:#000000;
	color:#ffffff;
	padding:5px 5px;
}
body .swatches-select> div,
body .swatches-select> div:hover{
	border: 1px solid  #cecece;
	padding:5px 5px;
}

    Best Regards

    December 20, 2018 at 7:28 am #97160

    pogopie
    Participant

    Thanks works good, but can i make the a specific size so all are in a 1:1 square ?

    December 20, 2018 at 7:31 am #97161

    pogopie
    Participant

    Figured it out myself, thanks a lot for the code.
    -closed

    December 20, 2018 at 7:38 am #97165

    pogopie
    Participant

    One more little question, what would be the code for a smooth transition on hover ? for like 2-3 sec. with opacity or color ?

    December 20, 2018 at 10:16 am #97202

    Elise Noromit
    Member

    Hello,

    Replace the code with this one: 

    body .swatches-select> div:hover,
body .swatches-select> .active-swatch {
    border: 1px solid  #000000;
	background:#000000;
	color:#ffffff;
	padding:5px 5px;
	transition:background-color 2s ease,border-color .25s ease;
}
body .swatches-select> div{
	border: 1px solid  #cecece;
	padding:5px 5px;
}

    Best Regards

    December 20, 2018 at 10:52 am #97225

    pogopie
    Participant

    Works like a charm, thanks a lot. A last request about the sizing.

    When i select a size, the a text appears “Cancel selection” and i would like to be able to deselect the size by clicking on the square again.

    Could this be done ?

    Attachments:
    You must be logged in to view attached files.
    December 20, 2018 at 1:45 pm #97274

    Elise Noromit
    Member

    Hello,

    Add this code to the Theme settings > Custom CSS: 

    body .variations_form.variation-swatch-selected .reset_variations {
    visibility: hidden!important;
}

    Best Regards

    December 20, 2018 at 2:05 pm #97281

    pogopie
    Participant

    The deselecting is not working. Just the text is hidden.
    I want it like
    Click = select and click again = deselect

    December 20, 2018 at 8:39 pm #97431

    Elise Noromit
    Member

    Hello,

    It is not possible to do with CSS. This would require Woocommerce customization what is not covered by our support.

    Best Regards

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)