Announcement

Collapse
No announcement yet.

DWB 1.3 + WooCommerce code and settings starting point

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • DWB 1.3 + WooCommerce code and settings starting point

    WooCommerce is a hugely popular plugin, but known to be somewhat quirky. I know some of this has been covered in places scattered through the forum, so I'd like to propose a central ordered place for ideal code and settings to quickly copy-and-paste as a starting point for new Dynamik WooCommerce shops.

    Step 1 should always be..
    On Genesis / Dynamik sites it is essential to install Genesis Connect for WooCommerce plugin, but only activate it immediately after activating the WooCommerce plugin.
    http://wordpress.org/plugins/genesis...t-woocommerce/


    As a side-by-side comparison I set up two test sites with various content dimensions.
    Apart from adding menus in Dynamik, both sites have completely default settings for the theme, and for WooCommerce plugin.
    • One with WooThemes Canvas + WooCommerce
    • One with Dynamik Website Builder 1.3 + WooCommerce + Genesis Connect for WooCommerce

    At a glance, the most obvious differences or issues on the Dynamik version were:
    1. Overlapping products on small screen sizes - This appears to have been resolved in later versions of WooCommerce
    2. Product images have borders
    3. There are only 10 products per page instead of 12

    Both sites have less-than-ideal image cropping, but that's an old WooCommerce topic covered extensively.
    Still, if DWB-specific solutions apply, then this may also be a good thread to post them.


    Based on a third test site I'll research and add the solutions over time, unless someone beats me to it... ; )
    Last edited by simbasounds; 03-02-2014, 01:56 PM. Reason: Removed links to removed content. Updated the post to reflect changes in later versions of WooCommerce.

  • #2
    In recent versions of WooCommerce these changes aren't needed. WooCommerce plays nicely with Dynamik / Genesis now.

    To fix issue #1, above - Overlapping products on small screen sizes - add this code to:
    Dynamik Design – Responsive – Tablet vertical and lower sizes
    (4th icon from left: @media only screen and (max-width:840px) { })


    ul.products li.product:nth-child(2n) {
    float: right !important;
    clear: none !important;
    }

    .woocommerce ul.products li.product a img,
    .woocommerce-page ul.products li.product a img {
    width: auto !important;
    }

    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
    width: 46% !important;
    min-height: 264px !important;
    }


    The min-height amount, above, may need adjusting depending on the length of your product titles.
    Last edited by simbasounds; 03-02-2014, 01:59 PM. Reason: Remove link to redundant content and updated the post to reflect changes in later versions of WooCommerce.

    Comment


    • #3
      Centring the content (product images and text) on small screen sizes tidies your shop up further.
      The above code (in 4th media query) becomes:

      ul.products li.product:nth-child(2n) {
      float: right !important;
      clear: none !important;
      }

      .woocommerce ul.products li.product a img,
      .woocommerce-page ul.products li.product a img {
      width: auto !important;
      margin:0 auto !important;
      }

      .woocommerce ul.products li.product,
      .woocommerce-page ul.products li.product {
      width: 46% !important;
      min-height: 264px !important;
      text-align:center;
      }

      Comment


      • #4
        The second "issue" - really just a styling preference - is the borders around product images. The borders are actually box-shadows.
        Removing them is a matter of adding this code to Dynamik Custom:

        .woocommerce div.product div.images img,
        .woocommerce #content div.product div.images img,
        .woocommerce-page div.product div.images img,
        .woocommerce-page #content div.product div.images img,
        .woocommerce ul.products li.product a img,
        .woocommerce-page ul.products li.product a img {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        }
        Last edited by simbasounds; 03-02-2014, 02:00 PM. Reason: Removed link to redundant content.

        Comment


        • #5
          Really helpful !! thanks for this....... I have been working with Woocommerce a lot recently and agree a central point for this huge plugin alone would be great !!!!!

          Comment


          • #6
            Thanks! : ) I'll continue to add stuff here over time - there are still a few tweaks that can be applied to improve the shop display in Genesis / Dynamik.

            Comment


            • #7
              To conclude the initial main differences between WooThemes Canvas and Genesis / Dynamik, the third item on that list was the number of items displayed in the shop (10 vs 12).
              This is simply a matter of changing "Blog pages show at most [10] posts" to [12] in your wp-admin Settings - Reading

              Comment


              • #8
                This is very helpful information, simbasounds. I'm close to finishing my first WooCommerce site (using it with DWB), hopefully launching this week. I borrowed your CSS code to remove the box shadows around the product photos, and I think I prefer that look to the out-of-the-box WooCommerce box shadows. So thanks for sharing the CSS.

                Comment


                • #9
                  So glad I found this, thanks guys.... Ok so brand new site installed locally, I have Genesis and DWB installed (latest versions). Today I wanted to install WooCommerce plug in and the Genesis connect plugin. I activate the Woo Commerce plug and get the message saying that the theme I'm using is does not declare theme support, so then i install and activate the Connect plugin which gets rid of the message. So far cool. I go and then look at my site and all my pages are now blank, apart from my ez home page. What am I missing? As its not online yet here is a quick video - http://screencast.com/t/reLGJzqjb

                  Thanks in advance for any pointers

                  Comment


                  • #10
                    This is great info, thanks! I'm just about to embark on a Woocommerce project and have been tossing up the options between Canvas and Genesis. Think I'm going to go with Genesis and DWB as a starter, and see how it goes. Does anyone have any good ideas regarding image sizes?

                    Comment


                    • simbasounds
                      simbasounds commented
                      Editing a comment
                      Images with WooCommerce are always a little tricky to get right. I don't recall specifically what worked for me when working with Canvas, but safe to say that exactly the same rules apply to Genesis / Dynamik ie. the images behave in the same (hard-to-predict) way, which is evidenced by the individual product pages of the two demo sites I set up.

                      I do recall the settings page at /wp-admin/admin.php?page=woocommerce_settings&tab=catalog
                      ​..and the plugin recommended by WooThemes: http://wordpress.org/plugins/regenerate-thumbnails/ came in handy..

                  • #11
                    I'm going to be working on my first Woocommerce & DWB site and am also finding this a useful thread.

                    I was thinking of turning off the pre-built woo styles in the settings panel and style from scratch (I like to know what's affecting what) - is there a list of the main woo css selectors 'out there' which we can drop into the frontend CSS editor and style on-the-fly?

                    I had a hunt around on t'internet this afternoon but couldn't find anything so was thinking I may need to copy the master css from the woo plugin > assets folder, strip everything out and start from scratch - but there's tons of styling in there to dig through!

                    I was thinking of something like we have indicating where the genesis hooks are, so you'd have where a product div is visually highlighted with the class name alongside it, then one for the image, price and description etc.

                    Is there anything like that around or is it going to be a case of making it up as I go along?

                    Comment


                  • #12
                    Not found the definitive list of css selectors for woo but I found this which may be of use - there's other pages which cover woocommerce and other plugins etc:

                    http://jeffmcnear.com/woocommerce-css-adjustments/

                    Comment

                    Working...
                    X