Woo-commerce – edit shop site - by Tessi_G

This topic has 6 replies, 4 voices, and was last updated 7 years, 9 months ago ago by Eva Kemp

  • Avatar: Tessi_G
    Tessi_G
    Participant
    June 7, 2016 at 10:19

    Hi there,
    I am using the WooPress coffee variant and wanted to modify the WooCommerce shop site. As for example change the breadcrumbs style, sidebar, etc. Unfortunately when I want to change the breadcrumbs style from defaul to defaul left this change is not visible on my page.
    Do you know if there is anything that overwrites this page?
    Thank you,
    Tessi

    5 Answers
    Avatar: Robert Hall
    Robert Hall
    Support staff
    June 7, 2016 at 10:53

    Hello,

    Please provide us with link to the page and wp-admin access in Private Content.

    Regards,
    Robert Hall

    Avatar: Tessi_G
    Tessi_G
    Participant
    June 8, 2016 at 08:08

    Sure. Here they are.

    BTW: I am also asking myself how to edit the following at the woocommerce shop/products page:

    – How can I change the “read more” button to an “add to cart” button?
    – How can I take out the list options (like default sorting, sort by popularity, etc).
    – How can I take out the add to wishlist hover bar?
    – How to change the size of the images?

    Thank you very much!

    Please, contact administrator
    for this information.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 8, 2016 at 09:12

    Hello,

    As for breadcrumbs please add this code in Theme Options > Custom CSS > Global Custom CSS:

    .post-type-archive-product .page-heading {
      text-align: left;
    }
    .post-type-archive-product .page-heading .title {
        margin: 0;
        text-align: left;
    }

    – “Read more” button is shown when your product is out of stock and it can’t be added to cart.

    – To remove Woocommerce sorting use this code in Global Custom CSS:

    .filter-wrap {
        display: none;
    }

    – Use this css code to remove “Add to wishlist hover bar”:

    .footer-product {
       display: none;
    }

    – Change images sizes in Woocommerce > Products > Display > Product Images and regenerate thumbnails http://wordpress.org/extend/plugins/regenerate-thumbnails/ .

    Best regards,
    Jack Richardson.

    Avatar: Tessi_G
    Tessi_G
    Participant
    June 8, 2016 at 13:40

    Hello Jack,

    1) Breadcrumbs
    Okay, the title is on the left now, but: the whole heading is still bigger than the usual “default left”, also the title itself is bigger in size and the current site in the breadcrumbs should be in a different color (=green).

    How can I adjust that?
    How can I do the same for the main product pages?

    2) Read more button
    Okay, understood.

    3) Woocommerce sorting
    It’s working. Thank you.

    4) Add to wishlist hoverbar
    Also working. Thanks.

    5) Change image sizes
    Well, that’s working for the shop site. But when I go to the main product site, the image is still way too big. How to change that?

    6) Modify format of shop and main product page
    a) How can I edit the format, like font type and font color of the woocommerce sites? Also I want to change the hover color of buttons and the style of the h1-h6 titles (from upper cased letters to normal cased letters).
    b) I want to put the products in the shop next to each other (not list them below each other). How to do that?

    Thank you very much!

    Regards,
    Tessi

    Avatar: Eva
    Eva Kemp
    Support staff
    June 8, 2016 at 16:21

    Hello,

    1. Please also use this css code:

    .post-type-archive-product .page-heading .title {
      font-size: 18px;
    }
    .post-type-archive-product .bc-type-3, .single-product .bc-type-3 {
        padding-top: 20px !important;
        padding: 20px 0 !important;
        background-color: green !important;
    }
    
    .single-product .page-heading {
      text-align: left;
    }
    .single-product .page-heading .title {
        margin: 0;
        text-align: left;
        font-size: 18px;
    }

    5. Please show a page where the image is too big.

    6. a) you can do this via custom css code.
    Please use this css code:

    h1, h2, h3, h4, h5, h6 {
      text-transform: capitalize;
    }

    b) Go to Theme Options > Products Page Layout > Products per row, set 4 products per row or 3, but not 2.

    Regards,
    Eva Kemp.

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.