Docs

[CaseyGris]

Hello, I love the look you guys did with the woocommerce shop in the ethos demo. I am currently using the ethos demo with my website, which is http://www.havoly.com.

I did not use any of the demos, but just built my site with the ethos backbone and have designed it myself. But I would like nearly the exact same look of the woocommerce shop portion. The demo I looked at has green prices when hovered over and mine has red. Is there a way to just get this shop part of the demo uploaded onto my site? Does the filter by price widget come with this? I guess to rebuild something similar I’d have to add a sidebar to the shop page and just add these widgets? Sorry if this sounds elementary, but I have been working with it and reading posts here on the forum and haven’t had much luck.

I appreciate your help.

[Paul R]

Hi,

Thanks for writing in!

1. To make the add to cart buttons the same as the demo, you can add this under Custom > Edit Global CSS in the Customizer.

.woocommerce li.product .add_to_cart_button {     
    color: #8bc19d;
    border-color: #8bc19d;
    border-width: 3px;
    text-transform: uppercase;
    background-color: transparent;
}

2. To add sidebar to your shop page, you can add this in your child theme’s functions.php file

function x_get_content_layout() {

    $content_layout = x_get_option( 'x_layout_content' );

    if ( $content_layout != 'full-width' ) {
      if ( is_home() ) {
        $opt    = x_get_option( 'x_blog_layout' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_singular( 'post' ) ) {
        $meta   = get_post_meta( get_the_ID(), '_x_post_layout', true );
        $layout = ( $meta == 'on' ) ? 'full-width' : $content_layout;
      } elseif ( x_is_portfolio_item() ) {
        $layout = 'full-width';
      } elseif ( x_is_portfolio() ) {
        $meta   = get_post_meta( get_the_ID(), '_x_portfolio_layout', true );
        $layout = ( $meta == 'sidebar' ) ? $content_layout : $meta;
      } elseif ( is_page_template( 'template-layout-content-sidebar.php' ) ) {
        $layout = 'content-sidebar';
      } elseif ( is_page_template( 'template-layout-sidebar-content.php' ) ) {
        $layout = 'sidebar-content';
      } elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
        $layout = 'full-width';
      } elseif ( is_archive() ) {
        if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {
          $layout = 'content-sidebar';
        } else {
          $opt    = x_get_option( 'x_archive_layout' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        }
      } elseif ( x_is_product() ) {
        $layout = 'full-width';
      } elseif ( x_is_bbpress() ) {
        $opt    = x_get_option( 'x_bbpress_layout_content' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( x_is_buddypress() ) {
        $opt    = x_get_option( 'x_buddypress_layout_content' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_404() ) {
        $layout = 'full-width';
      } else {
        $layout = $content_layout;
      }
    } else {
      $layout = $content_layout;
    }

    return $layout;

  }

3. Filter by price widget is added when you install woocommerce.

You can add it to your main sidebar

http://screencast.com/t/zpkantp9

Hope that helps.

[Author]

Posts