Support » Plugin: WooCommerce » Changing how products appear on the Shop page. CSS?

  • specitechs


    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 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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • mewrd


    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%;



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



    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.



    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 you’ll see what i mean.



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



    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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Changing how products appear on the Shop page. CSS?’ is closed to new replies.