Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • August 2, 2021 at 5:46 pm #1313967
    wtechgr

    Hello there guys,

    I am trying to replicate the css shown here , in order to align all the “add to cart” buttons at the bottom of the grid and I am facing some difficulties, since the classes etc are different than the default woocommerce. Can you please kindly guide me in the process to implement this correctly using Enfold?

    You may find the link to the staging website page at the private content section (I know that the images need to be replaced/resized etc, but I am currently only concerned for the red button at the bottom of each product), as well as login credentials.

    Thank you in advance for your reply.

    Best regards

    • This topic was modified 3 years, 3 months ago by wtechgr.
    August 4, 2021 at 7:15 am #1314282
    Rikard

    Hey wtechgr,

    Please try the following in Quick CSS under Enfold->General Styling:

    .shop_columns_3 .products .product {
    height: 400px;
    min-height: 400px;
}

.av-product-class-minimal .inner_product_header {
    position: absolute;
    bottom: 0;
}

    Best regards,
    Rikard

    August 4, 2021 at 3:26 pm #1314410
    wtechgr

    Hello Rikard and thank you very much for the quick CSS.

    This one almost did the job. I had to adjust it a bit to 450px, since some buttons were cut in half.

    Also,

    1) still the red buttons under the products are not aligning with each other at the bottom, is there a way to fix this?
    and
    2) product categories have a border line around them and now that we’ve increased the height of the columns, the product categories in the columns do not appear as symmetrical (link provided at the private content). Is there a way for the custom height of the columns to take place only for products and not the product categories at the shop page? If not, what could be the correct css code to hide the border lines?

    Thank you in advance for your reply!

    Best regads

    • This reply was modified 3 years, 3 months ago by wtechgr.
    August 7, 2021 at 3:51 pm #1315037
    Mike

    Hi,
    Thank you for your patience, to align your product buttons please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.woocommerce-page li.product h2.woocommerce-loop-product__title {
	min-height: 55px;
}

    To remove the border, please try this css:

    #top.archive .products .product-category {
    border-style: none;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    September 23, 2021 at 4:24 pm #1322060
    wtechgr

    Hello there again Mike,

    Unfortunately the first css of the last reply, just brings both the title of the product and the button a few px down (at some products the button even partially disappears behind the product that is right below).

    I wish to achieve that the title remains where it is and only the buttons to align with the other red buttons of the row, in the shop page.

    Thank you in advance for your reply!

    Best regards,

    Victor

    • This reply was modified 3 years, 1 month ago by wtechgr.
    September 24, 2021 at 12:29 pm #1322197
    Mike

    Hi,
    Thanks for the feedback, unfortunately I’m not seeing this issue with the first grid link above, please see the screenshot in the Private Content area of when I test the css. Please include a screenshot and explain what browser and screen size you are testing with.

    Best regards,
    Mike

    September 24, 2021 at 9:05 pm #1322237
    wtechgr

    Hello there again Mike,

    Thank you for your reply.

    Indeed, at the link you are checking, the layout is great, as expected. Although in another link, on another product category, the result is not as expected.

    I think we are getting close and we need to play a bit with the px of the two css provided. I mostly rely on your experience, since mine is not that great!

    You may find the screenshot and the link where the issue is located, at the private area. The screen resolution is 1920×1080 and it appears the same both in chrome and edge browsers.

    For now, I went ahead and I’ve hidden the buttons, as the client requested, until we find the way to align them properly. Just comment out the css in quick css, whenever you wish to check the alignment issue.

    Thank you so much for your assistance!

    Best regards,

    Victor

    • This reply was modified 3 years, 1 month ago by wtechgr.
    September 25, 2021 at 3:41 pm #1322288
    Mike

    Hi,
    Thanks for the feedback, I see that your two category pages are not consistent in their layout, the first one had long titles that wrapped into two lines and no descriptions so this css corrected:

    #top.term-204.woocommerce-page li.product h2.woocommerce-loop-product__title {
	min-height: 55px;
}

    the second category has mixed short and long descriptions so this css corrects:

    #top.term-67.woocommerce-page li.product .woocommerce-loop-product__link > .category-desc > p {
	min-height: 72px;
}

    but you would not want the second css to apply to the first category because it would create an odd gap before the buttons, this would not be an issue using the category classes in the css to apply these rules accordingly, but I see that you have 108 categories, so I’m not sure how we can assign these without manually checking each one.
    Can you make all of the categories consistent?

    Best regards,
    Mike

    September 26, 2021 at 2:06 pm #1322348
    wtechgr

    Edited to delete, as it was posted twice (I clicked too many times). Please kindly check the next reply!

    • This reply was modified 3 years, 1 month ago by wtechgr.
    September 26, 2021 at 2:06 pm #1322349
    wtechgr

    Hello there again Mike,

    Thank you very much for the prompt reply.

    I see now how it should work. At some point I thought I fixed for all categories with one go, although it appears that what needs to be done, is to specify for every category separately, as you have advised.

    Once again, thank you very much for your time and effort! In case I need further assistance, I’ll come back!

    Best regards,

    Victor

    • This reply was modified 3 years, 1 month ago by wtechgr.
    September 26, 2021 at 7:21 pm #1322367
    Mike

    Hi,
    Glad we were able to help, if you have new questions please create a new thread and we will gladly try to help you. Please let us know when we should close this thread. Thank you for using Enfold.

    Best regards,
    Mike

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