Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 15, 2020 at 5:34 pm #1204071
    CarletonTorpin

    I am using a plugin called Variation Swatches for WooCommerce and the makers of the plugin suggested that I contact the Enfold theme creators about my request.

    I’d like to change the placement of the Product Attribute name in my product page’s selector box.

    Presently, I have a variety of color swatches for a given product and the product attribute title appears to the left of those swatches.

    In its current configuration, this creates a large margin on the left of the selector box.

    I’d like the product attribute title placed above the swatches, rather than to the left of them.

    https://prnt.sc/rzx4ji

    Thank you for any assistance,

    Carleton

    April 17, 2020 at 8:28 am #1204629
    Rikard

    Hey Carleton,

    Thanks for the screenshot. Could you post a link to where we can see the actual element as well please?

    Best regards,
    Rikard

    April 17, 2020 at 5:46 pm #1204756
    CarletonTorpin

    I’ve updated the private content section with a link.

    Thank you. :)

    Carleton

    April 19, 2020 at 6:39 am #1205172
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    .single-product .woo-variation-items-wrapper {
  display: block;
}

    Best regards,
    Rikard

    April 21, 2020 at 7:06 pm #1205925
    CarletonTorpin

    Thank you for that.

    I’ve added it to my quick css section, but there is not a visible change on the product page.

    I have cleared browser cache and refreshed the page, but still no change.

    Thank you for your continued assistance in diagnosing this.

    April 22, 2020 at 6:48 pm #1206319
    Victoria

    Hi CarletonTorpin,

    https://share.getcloudapp.com/JrubWYAN Here is what I am seeing. Is this not how you need it?

    Best regards,
    Victoria

    April 22, 2020 at 7:19 pm #1206340
    CarletonTorpin

    Thank you for checking on this.

    The screenshot you posted is indeed how it currently appears, but that is not the way I would like it to appear.

    I’d like to the “Felt Colors” to be shown above the colors swatches, instead of having “Felt Colors” show up to the left of the color swatches, as it shows currently.

    Image of woo-commerce product listing

    April 24, 2020 at 4:33 pm #1206849
    Victoria

    Hi CarletonTorpin,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top .variations td.label {
    display: table-row;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 24, 2020 at 5:53 pm #1206881
    CarletonTorpin

    Thank you for your efforts with solving this.

    I’ve implemented the new code, which resulted in a visible change.

    It now shows two words stacked on top of each other, but the words still aligned to the left of the color swatches instead of on top of them.

    Any way to make it so the whole text is above the color swatches?

    This is how the page currently looks with those CSS changes.

    Product page screenshot

    April 26, 2020 at 4:07 pm #1207279
    Victoria

    Hi CarletonTorpin,

    https://share.getcloudapp.com/yAu2bNm2 I cannot see the screenshot. You can upload screenshots to a service like Dropbox or http://imgur.com and give us the links here.

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    April 26, 2020 at 11:21 pm #1207396
    CarletonTorpin

    Thank you for letting me know the screenshots are not displaying properly for you.

    Here is an Imgur link to a mockup of what I’d like to achieve:

    View post on imgur.com

    April 28, 2020 at 5:30 pm #1207869
    Victoria

    Hi CarletonTorpin,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top .variations td.label,
#top .variations td.label + td {
    display: table-row;
}

    Please remove the code I gave you before and use this.

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 29, 2020 at 5:57 pm #1208223
    CarletonTorpin

    Thank you again for your continued help with this.

    I shared your code screenshot with the creators of the plugin and they provided the solution via this code:

    #top .variations td { display: block; }
    .single_variation_wrap { margin: 10px 0px 20px 10px; }

    So, it has been solved for me. :)

    Thank you again for all the help.

    April 29, 2020 at 10:08 pm #1208335
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Change Placement of Attribute Title on Product Page’ is closed to new replies.