Please submit a private ticket if you need to share sensitive information, such as license details and admin credentials.

Okay
  Public Ticket #2269212
Styling/formatting the attribute/variations
Closed

Comments

  • Joe started the conversation
    January 13, 2020 at 12:33pm

    Hi

    I'd like to change the styling for the text used in the variations. 

    It currently looks like this…

    Volt: 230v, Width (max per leaf): 3m, Weight (max per leaf): 700kg

    But I'd like 'value' for the attribute to be bold, like this…

    Volt: 230v, Width (max per leaf): 3m, Weight (max per leaf): 700kg

    Any help you good give would be greatly appreciated.

    Thanks in advance and kind regards

    Joe

  • Joe replied
    January 13, 2020 at 12:34pm

    Here's a screenshot for reference.

  •  767
    Janilyn replied
    January 13, 2020 at 12:34pm

    Hi, 

    We’ve received your ticket and assigned one of our developers to help you with that. He’ll be looking into your request and responding as soon as finding a solution. Please stay in touch as he might need you to provide further information.

    Best regards.

    Janilyn T. - WPClever Support Agent

  •  1,240
    Dustin replied
    January 13, 2020 at 11:18pm

    Hi Joe,

    Yes! I can help you to change the code when you use the premium version.

    Best regards,
    Dustin

  • Seamus replied
    February 29, 2020 at 11:47am

    Hi there, I just purchased the premium plugin & would also like some info on adding span tags to the variation name & variation data so that I can style them.

  •  1,240
    Dustin replied
    March 1, 2020 at 1:16am

    Hi Seamus,

    Please add below function to current theme (or child-theme) / functions.php

    add_filter( 'woovr_variation_name', 'your_woovr_variation_name', 99, 2 );
function your_woovr_variation_name( $variation_name, $variation_product ) {
   return '<span class="your-class-name">' . wc_get_formatted_variation( $variation_product, false, true, false ) . '</span>';
}

    Now the output will be shown like this https://prnt.sc/r9p12l

    And you can style for the variation name with separate attributes.

    Example CSS code (add to WP-Admin → Appearance → Customize → Additional CSS):

    .woovr-variation-name .your-class-name .variation {
        display: flex;
        align-items: center;
        margin: 0;
    }
.woovr-variation-name .your-class-name .variation * {
        padding: 0;
        margin: 0 5px 0 0;
    }
.woovr-variation-name .your-class-name .variation dt {
        font-weight: 400;
    }
.woovr-variation-name .your-class-name .variation dd {
        margin-right: 10px;
        font-weight: 700;
    }

    And the result https://prnt.sc/r9p314

    Best regards,
    Dustin