Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 14, 2017 at 7:08 am #838461
    a3brown4

    Hello!

    I am trying to reverse the overlays on the products, so that the product name doesn’t show until hover, as well as add sliders to product category pages.

    See example: Trying to recreate this: http://deboulle.com/p-category/fine-jewelry/fine-jewelry-pearl-collection/

    Thanks in advance!

    • This topic was modified 7 years, 3 months ago by a3brown4.
    August 16, 2017 at 7:57 pm #840061
    Basilis

    Hey a3brown4,

    Unfortunately it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However if its really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Basilis

    August 16, 2017 at 9:04 pm #840081
    a3brown4

    Hi Basilis-

    But this is an Enfold option? It isn’t something that Woocommerce has by default… meaning that it should be something that was specified by the theme, so it should be customizable. If it was a Woocommerce styling issue, that would be something that I can see a developer was needed for, however this is in regards to the Enfold theme.

    It is a menu option in the Enfold Shop Options: http://imgur.com/a/OndWD

    August 17, 2017 at 5:25 am #840204
    a3brown4

    Better yet, here is the EXACT look I am trying to achieve in your own theme demo! See here: http://kriesi.at/themes/enfold-minimal-photography/

    The on hover effect on the gallery is exactly what I am trying to get for the product grid…

    August 19, 2017 at 5:49 pm #841331
    Victoria

    Hi a3brown4,

    I got a 404 on bridal collection. Which is the page you need help with? Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    August 21, 2017 at 2:03 am #841807
    a3brown4

    Hi Victoria-

    I was able to achieve my desired outcome on the product grids with a plugin, but it does not allow me to use the plugin features on the related products at the bottom of a single product page. See here: http://new.deboulle.com/product/de-boulle-collection-black-diamond-swirl-ring/

    August 21, 2017 at 2:33 am #841811
    a3brown4

    On other question: On mobile, my product pages are all pushed to the left of the screen. Is there a way to fix this?

    Thank you for any and all help!

    View post on imgur.com

    • This reply was modified 7 years, 3 months ago by a3brown4.
    August 23, 2017 at 6:02 am #842867
    Ismael

    Hi,

    Thank you for the screenshot.

    Did you add any css modifications? Please check the css codes and make sure that the curly braces are closed properly. The product layout is not getting the correct css media queries so it’s possible that there are invalid css modifications in the Quick CSS field. Temporarily, you can add the following css code to fix the product layout on mobile view.

    @media only screen and (max-width: 989px) {
  /* Add your Mobile Styles here */
  .single-product-summary {
      width: 100%;
  }

  .woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product {
    width: 50% !important;
  }
}

    Best regards,
    Ismael

    August 23, 2017 at 10:13 pm #843304
    a3brown4

    Hi Ismael-

    Awesome! Thanks for your help!

    Any ideas on how to reverse the dark overlays for the related products and the padding?

    Thanks again!

    August 24, 2017 at 1:11 pm #843467
    Ismael

    Hi,

    What do you mean by “reverse”? How did you add the dark overlays? Try to use css media queries so that the modification will only affect the desktop view. 

    @media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

}

    Move the “dark overlay” css modification inside the css media query above.

    Best regards,
    Ismael

    August 24, 2017 at 6:19 pm #843644
    a3brown4

    Hi Ismael-

    I didn’t modify the overlays on the products; it was a setting in the Shop Options in the Enfold Admin menu. I am looking to have them show without the overlay, but show the overlay on hover, similar to the photos in your Enfold Photography demo.

    Thanks again,
    -AJ

    August 26, 2017 at 5:25 am #844278
    Ismael

    Hi,

    Did you check the css modifications? Again, the css media queries for the products are not being applied correctly, probably because of the invalid css modifications in the QuicK CSS field. If you want to remove the overlay, try this css code.

    #top #wrap_all .av-product-class-minimal-overlay a .inner_product_header {
    opacity: 0;
}

    Best regards,
    Ismael

    September 1, 2017 at 9:26 pm #846988
    a3brown4

    Hi Ismael-

    Thanks for the last CSS, it worked. However, I still would like the Product name and Price to show on hover.

    I double check all the Quick CSS I have used, but there isn’t anything corresponding to the product grid or images that I have added. Any idea how to add the overlay only to “on hover” events?

    I have added my quick css for reference.

    Thanks for the great support!

    • This reply was modified 7 years, 2 months ago by Ismael.
    September 4, 2017 at 8:46 am #847577
    Ismael

    Hi,

    There is an invalid css code. 

    /* WOOCOMMERCE PRODUCT OVERLAYS */
(HOLD)..related.products {
display: none !important;
}

    Remove the part.

    (HOLD).

    Best regards,
    Ismael

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