Viewing 30 posts - 1 through 30 (of 30 total)
  • Author
    Posts
  • September 1, 2020 at 9:11 pm #1242592
    KeyshaunSmith

    Hello there!

    I have been attempting to get this issue resloved for quite some time. I originally posted here in the Enfold forums and was told that I needed to reach out to WooCommerce and there is nothing you could do to help.

    I reached out to WooCommerce, and after lots of back and forth they came to the conclusion that it is an issue with the theme. Please see below for a quote from them.

    WOOCOMMERCE QUOTE:
    “Thanks for the reply. Out of the box, I would like to see Product Add-ons more compatible with themes out of the box. The plugin matches the styles with the Storefront theme and all of its child themes. I’ve created the enhancement request to make Product Add-ons match styles built into WooCommerce so that the styles match those applied to WooCommerce by the active theme.

    This change will likely take several months if not years to achieve so we do not have an immediate solution. The only suggestion will be to contact the theme developers to have styling applied to Product Add-ons in addition to WooCommerce.”

    So here I am back here again to contact the theme developers to have the styling applied to product add-ons in addition to WooCommerce.

    Please see THIS SCREENSHOT for the styling issues. The red box is the default WooCommerce product variations. While the purple box is a WooCommerce made plugin called Product Add-ons.

    Notice how the dropdown boxes appear differently between the two, and also notice how the label is to the left of one dropdown box and above the other. Notice that the font sizes and weights are different as well. One dropdown box has a white background while the other has a gray background.

    Any help would be greatly appreciated here. I feel like I have been chasing my tail spinning in circles.

    September 4, 2020 at 2:42 pm #1243384
    KeyshaunSmith

    Hello! Any update on this?

    Thanks!

    September 7, 2020 at 11:36 am #1243925
    Rikard

    Hi KeyshaunSmith,

    I’m very sorry for the late reply, and thanks for the screenshot and login details. I had a look at a few of your products, but I couldn’t find one that looks exactly like your screenshot. Could you post a link directly to an example product please? Also, you want the bottom select box to look like the top one, correct?

    Best regards,
    Rikard

    • This reply was modified 4 years, 1 month ago by Rikard.
    September 7, 2020 at 3:59 pm #1244014
    KeyshaunSmith

    Hello there!

    I don’t have one that looks exactly like that anymore, I have been doing some changing around on my site. However this one is fairly similar.

    I like the way the bottom looks better, but I feel there is too much padding between items. Meaning if you look at the heading that says “Name For Personalization” and then the description underneath it and then the input box, they are just broken up with too much space between them.

    If we could get everything to look like the bottom but the spacing was less and the heading size was slightly smaller I would be 100% thrilled. But honestly, even if we had to make it all look like the top that is fine too.

    Hope that helps?

    September 9, 2020 at 3:43 am #1244526
    Rikard

    Hi,

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

    h3.wc-pao-addon-name {
  margin-bottom: 0;
}

.wc-pao-addon-description p {
  margin-top: 0;
}

table.variations select {
  background-color: transparent !important;
}

    Best regards,
    Rikard

    October 2, 2020 at 11:37 pm #1250208
    KeyshaunSmith

    Hello so this appears to fix the margins, however I still have the difference in text appearance.

    How the text is to the left of the field for the “Style” dropdown and then the other fields have the label above the field, and like way bigger.

    I would like for the label to be above the field and somewhere between the sizes of the two labels currently.

    October 4, 2020 at 7:17 am #1250372
    Rikard

    Hi,

    Please try this CSS as well:

    table.variations td.value {
    display: block;
    width: 95%;
    margin-left: 11%;
}

table.variations td.label {
    width: 95%;
    margin-left: 11%;
}

table.variations td.label label {
    text-align: left;
}

    Best regards,
    Rikard

    October 4, 2020 at 7:04 pm #1250461
    KeyshaunSmith

    Thanks for the reply. Still not functioning properly.

    See how that “style” heading is to the left and then the “Name for personalization” “gift message” and “gift wrapping” headings are above and wayy larger?

    I want to make all the headings be above and then a size between the “style” heading and the other headings.

    October 6, 2020 at 6:02 am #1250694
    Rikard

    Hi,

    I’ve adjusted the CSS a bit for you:

    table.variations {
    height: 100px;
    margin-left: 10% !important;
    width: 90% !important;
}

table.variations td.label {
    position: absolute;
    left: 11%;
    font-size: 18px;
    color: #000;
}

table.variations td.value {
    vertical-align: middle !important;
}

    Please review your site.

    Best regards,
    Rikard

    October 7, 2020 at 2:41 am #1251004
    KeyshaunSmith

    YAYYY! We are so close :)

    Take a look at the link I just sent over in the private content.

    The heads on “Name For For Personalization” seem to have remained the same size. The “Style” heading is the perfect size but the others are still a bit too large.

    Also it looks like the first image under “Gift Wrapping” is missing a left border.

    Thanks for all your help – you have been amazing!

    October 7, 2020 at 4:10 am #1251008
    KeyshaunSmith

    Please also take a look at the page in this private content.

    Things behave oddly when there is a dropdown box.

    Thanks!

    October 8, 2020 at 5:54 am #1251297
    Rikard

    Hi,

    Please try this CSS as well:

    h3.wc-pao-addon-name {
    font-size: 18px;
}

p.wc-pao-addon-3400-gift-wrapping-2 {
    padding: 3px;
}

    The other page with two dropdowns act like that since I gave you CSS for the other page, which only has one dropdown. It’s difficult to write CSS which accounts for that unfortunately, but you can try to edit this CSS:

    table.variations {
    height: 100px;
    margin-left: 10% !important;
    width: 90% !important;
}

    To this instead:

    table.variations {
    height: 170px;
    margin-left: 10% !important;
    width: 90% !important;
}

    Best regards,
    Rikard

    October 10, 2020 at 5:37 pm #1251909
    KeyshaunSmith

    Thanks for this! This is the closest we have been!

    So I guess, there really isn’t a way to make this work. Seeing as the number of dropdowns will differ from product to product. Some will have only 1 while others could have up to 3.

    Each product is unique and has its own set of options. Would it be better to do the inverse of what we are trying to do now? Instead make everything look like the top?

    Again however, the options on the bottom will not always be the same for each product. Some will have text boxes, some won’t. Some might have an additional dropdown while others won’t. Some might not have any of those bottom options.

    Let me know your thoughts.

    Thanks!

    October 12, 2020 at 5:03 am #1252162
    Rikard

    Hi,

    Thanks for the update. It’s the label which is the problem, as it has to be placed in an absolute position. If you are ok with it being in the position it was before, the it will likely work with having different amounts of dropdowns.

    Best regards,
    Rikard

    October 13, 2020 at 4:21 am #1252383
    KeyshaunSmith

    Is it possible to have all of the labels on the side. My goal is just to make it look cohesive, I don’t want some labels on top, and some labels on the side.

    If moving them to the side means we can put all of them on the side, and the spacing won’t be an issue then that works for me.

    Thanks!

    October 14, 2020 at 5:34 am #1252669
    Rikard

    Hi,

    Thanks for the update. I tried a few different CSS snippets but I couldn’t make that work unfortunately. I’m sure that it’s possible to do this, but we can only provide small and quick solutions. If you need modifications like these then more complex CSS might be needed, or you might have to edit the template itself.

    Best regards,
    Rikard

    October 14, 2020 at 11:26 pm #1252845
    KeyshaunSmith

    Thanks for the info!

    Is it possible to use the Enfold page builder with another theme such as storefront?

    I love the Enfold page builder, and honestly the theme overall as well, but it seems Enfold simply does not place nice with WooCommerce.

    Thanks!

    October 16, 2020 at 9:07 am #1253199
    Rikard

    Hi,

    It’s not possible to use the Enfold layout builder with other themes unfortunately, and the theme does work fine with WooCommerce. The problems you are having are related to plugins, are they not?

    Best regards,
    Rikard

    October 16, 2020 at 9:45 pm #1253348
    KeyshaunSmith

    This specific issue is related to a plugin, made by WooCommerce, for WooCommerce.

    However, there are other formatting stylsticing things that I’m just personally not a fan of. For example the Storefront theme displays the checkout “Your Order” section next to the “billing details” section instead of below it. Along with other small formatting things. So yes, I do believe Enfold theme works with WooCommerce, it’s just not perfect.

    October 18, 2020 at 5:29 am #1253569
    Rikard

    Hi,

    Thanks for the feedback. I do agree with you, there are likely some styling flaws when it comes to plugins unfortunately. It’s difficult for us to keep up with all plugins out there, even though they are official WooCommerce plugins.

    Best regards,
    Rikard

    October 18, 2020 at 9:15 pm #1253704
    KeyshaunSmith

    One thing that I would like to see if we can resolve. It appears that variable products places a background and border in the add to cart section while simple products do not do that. Is it possible to make it so that there is no background or border or variable products?

    Thanks!

    October 20, 2020 at 4:17 am #1254216
    Rikard

    Hi,

    Thanks for the update. I think we should be able to help you out with that, though I’m not sure where to look for a product like that on your site? Please post a link to an example, and a screenshot highlighting the changes you would like to make.

    Best regards,
    Rikard

    October 21, 2020 at 2:04 am #1254516
    KeyshaunSmith

    SIMPLE PRODUCT NO BACKGROUND – https://engravablegifting.com/product/couples-names-slate-serving-tray/

    VARIABLE PRODUCT HAS BACKGROUND – https://engravablegifting.com/product/family-name-slate-serving-tray-2/

    The first link without background is what I would like them all to look like. Here is a screenshot detailing everything https://www.dropbox.com/s/ix96w3xy7kzssjv/Screen%20Shot%202020-10-20%20at%207.58.12%20PM.png?dl=0

    October 22, 2020 at 6:35 am #1254837
    Rikard

    Hi,

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

    .main_color .variations_form {
    background-color: transparent;
}

a.wc-pao-addon-image-swatch {
    margin-left: 1px;
}

    Best regards,
    Rikard

    October 22, 2020 at 2:54 pm #1254995
    KeyshaunSmith

    Yay!

    That gets me 90% of the way there. The only thing left is still the gray border around the field where the background was, I would like to remove that border.

    Thanks!

    October 24, 2020 at 4:33 am #1255360
    Rikard

    Hi,

    Please try this CSS as well:

    #top .variations_form {
  border: none;
}

    Best regards,
    Rikard

    October 25, 2020 at 5:19 pm #1255515
    KeyshaunSmith

    Perfect thank you so very much!

    Ok 2 more things, and I think we are spot on.

    Can I increase the font size of the price?

    Can I hide the sku beneath the add to cart button

    Thanks again!

    October 26, 2020 at 12:56 am #1255574
    Jordan Shannon

    Hi,

    Add this to increase size:

    bdi{
font-size:20px!important;
}

    I don’t see a sku underneath the button. Do you mean the categories.

    Best regards,
    Jordan Shannon

    October 27, 2020 at 12:49 am #1255939
    KeyshaunSmith

    Thanks much that kinda worked, but it made all prices bigger throughout the entire website. It also didn’t increase the size of the dollar sign either.

    I would like to increase the size of the dollar sign, and the numerical values for price, only on the product pages.

    The sku is in the category section. It precedes the category. it says “sku n/a”

    Thanks!

    October 29, 2020 at 6:47 am #1256600
    Rikard

    Hi,

    Thanks for the update. Please try this CSS as well:

    .single-product bdi, .single-product bdi span {
  font-size: 20px;
}

.single-product .sku_wrapper {
  display: none;
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 30 total)
  • You must be logged in to reply to this topic.