WooCommerce - excelling eCommerce
Changing how products appear on the Shop page. CSS? (7 posts)

  1. specitechs
    Posted 1 year ago #

    Hi guys,

    I'm a newbie to coding (HTML, CSS basics) and websites in general but ive been using wordpress for a couple months now and i'm currently looking to make some adjustments to a friends shop page. well...how my products show in general.

    Currently the product name overlaps the product image, is there anyway to change this? and if so - how? which files do i need to modify? some descriptive help would be much appreciated thank you!

    The website we're talking about specifically is http://www.buyflowersnow.com.au/shop i want the names of the products to be displayed below the product image...rather than over the top.

    if any additional info is needed don't hesitate to ask. I've tried looking through the php files but i haven't had much to do with php. I've located some css files in the "assets" folder, but i don't think i've found anything relating to the display of product thumbnails in the catalog.

    ill express the fact that i'm happy with the individual product display. i would just like the product names to appear underneath the image on the catalog list.


  2. mewrd
    Posted 1 year ago #

    find the file main.css
    and replace some of the lines with this :
    make sure you make a copy of the file before changing it.

    main css line 3713
    `.product-item-holder {
    min-height: 250px;
    overflow: visible;

    main css line 2225

    .product-thumbnail-context {
    background: #fff;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    border: 1px solid #ddd;
    margin-bottom: 47px;

    main css line 2478

    .product-item-container {
    overflow: visible;
    position: relative;

    main css line 2327

    .product-item-container .product-item-context {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
    bottom: -33px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    color: #C0306F;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;

  3. specitechs
    Posted 1 year ago #

    thanks heaps, but can you clarify a bit further for me...i'm having trouble finding main.css where should it be located?

  4. WPyogi
    Forum Moderator
    Posted 1 year ago #

    main.css is from your theme. However, it would be much better to use a Custom CSS plugin - otherwise any changes you make will be lost when your theme is updated.

    You can ADD the above CSS to custom CSS and it should override the existing CSS in your theme.

  5. specitechs
    Posted 1 year ago #

    Ok so i added the above CSS into "simple custom CSS" plugin, it has made the desired modification for smaller product names but how do i make it apply the same changes to product with longer titles?
    if you have a look at buyflowersnow.com.au/shop you'll see what i mean.

  6. specitechs
    Posted 1 year ago #

    any particular line of the css above that i could modify to make the title strictly stay within the bottom border next to price?

  7. specitechs
    Posted 1 year ago #

    I've managed to modify the code to achieve the desired result...can anybody tell me how to increase the margin between the page title and the category links?

    Edit - Nevermind... i've managed to screw up the pages. X.X square one.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WooCommerce - excelling eCommerce
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic