Dara: Fixes WooCommerce products column layout and adds support for the 3.3+ new Customizer options
This commit is contained in:
Danny Dudzic
parent
6fd2139e01
commit
45a5cc230d
7 changed files with 631 additions and 163 deletions
|
|
@ -16,10 +16,19 @@
|
|||
* @return void
|
||||
*/
|
||||
function dara_woocommerce_setup() {
|
||||
add_theme_support( 'woocommerce', array(
|
||||
'thumbnail_image_width' => 300,
|
||||
// Declare WooCommerce support.
|
||||
add_theme_support( 'woocommerce', apply_filters( 'dara_woocommerce_args', array(
|
||||
'single_image_width' => 624,
|
||||
) );
|
||||
'thumbnail_image_width' => 300,
|
||||
'product_grid' => array(
|
||||
'default_columns' => 4,
|
||||
'default_rows' => 3,
|
||||
'min_columns' => 1,
|
||||
'max_columns' => 6,
|
||||
'min_rows' => 1
|
||||
)
|
||||
) ) );
|
||||
|
||||
add_theme_support( 'wc-product-gallery-zoom' );
|
||||
add_theme_support( 'wc-product-gallery-lightbox' );
|
||||
add_theme_support( 'wc-product-gallery-slider' );
|
||||
|
|
@ -88,7 +97,11 @@ add_filter( 'body_class', 'dara_woocommerce_active_body_class' );
|
|||
function dara_woocommerce_products_per_page() {
|
||||
return 12;
|
||||
}
|
||||
add_filter( 'loop_shop_per_page', 'dara_woocommerce_products_per_page' );
|
||||
|
||||
// Legacy WooCommerce products per page filter.
|
||||
if ( defined( 'WC_VERSION' ) && version_compare( WC_VERSION, '3.3', '<' ) ) {
|
||||
add_filter( 'loop_shop_per_page', 'dara_woocommerce_products_per_page' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Product gallery thumnbail columns.
|
||||
|
|
@ -108,7 +121,11 @@ add_filter( 'woocommerce_product_thumbnails_columns', 'dara_woocommerce_thumbnai
|
|||
function dara_woocommerce_loop_columns() {
|
||||
return 4;
|
||||
}
|
||||
add_filter( 'loop_shop_columns', 'dara_woocommerce_loop_columns' );
|
||||
|
||||
// Legacy WooCommerce columns filter.
|
||||
if ( defined( 'WC_VERSION' ) && version_compare( WC_VERSION, '3.3', '<' ) ) {
|
||||
add_filter( 'loop_shop_columns', 'dara_woocommerce_loop_columns' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Related Products Args.
|
||||
|
|
@ -135,12 +152,29 @@ if ( ! function_exists( 'dara_woocommerce_product_columns_wrapper' ) ) {
|
|||
* @return void
|
||||
*/
|
||||
function dara_woocommerce_product_columns_wrapper() {
|
||||
$columns = dara_woocommerce_loop_columns();
|
||||
$columns = dara_loop_columns();
|
||||
echo '<div class="columns-' . absint( $columns ) . '">';
|
||||
}
|
||||
}
|
||||
add_action( 'woocommerce_before_shop_loop', 'dara_woocommerce_product_columns_wrapper', 40 );
|
||||
|
||||
if ( ! function_exists( 'dara_loop_columns' ) ) {
|
||||
/**
|
||||
* Default loop columns on product archives
|
||||
*
|
||||
* @return integer products per row
|
||||
*/
|
||||
function dara_loop_columns() {
|
||||
$columns = 4; // 4 products per row
|
||||
|
||||
if ( function_exists( 'wc_get_default_products_per_row' ) ) {
|
||||
$columns = wc_get_default_products_per_row();
|
||||
}
|
||||
|
||||
return apply_filters( 'dara_loop_columns', $columns );
|
||||
}
|
||||
}
|
||||
|
||||
if ( ! function_exists( 'dara_woocommerce_product_columns_wrapper_close' ) ) {
|
||||
/**
|
||||
* Product columns wrapper close.
|
||||
|
|
|
|||
|
|
@ -573,6 +573,9 @@ ul.products li.product {
|
|||
|
||||
.button {
|
||||
margin-top: 1em;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.price {
|
||||
|
|
|
|||
|
|
@ -121,6 +121,10 @@ ul.products {
|
|||
position: relative;
|
||||
width: 22.05%;
|
||||
margin-left: 0;
|
||||
|
||||
a img {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
li.first {
|
||||
|
|
@ -132,49 +136,6 @@ ul.products {
|
|||
}
|
||||
}
|
||||
|
||||
.woocommerce {
|
||||
&.columns-1 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.columns-2 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 48%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.columns-3 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 30.75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.columns-5 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 16.95%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.columns-6 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 13.5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-result-count {
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -357,6 +318,51 @@ form {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.woocommerce {
|
||||
.columns-1 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-2 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 48%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-3 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 30.75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-5 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 16.95%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-6 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 13.5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.woocommerce {
|
||||
.site-content {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -4,7 +4,7 @@ Theme URI: http://wordpress.com/themes/dara/
|
|||
Author: Automattic
|
||||
Author URI: http://wordpress.com/themes/
|
||||
Description: With bold featured images and bright, cheerful colors, Dara is ready to get to work for your business.
|
||||
Version: 1.2.2-wpcom
|
||||
Version: 1.2.3-wpcom
|
||||
License: GNU General Public License v2 or later
|
||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||
Text Domain: dara
|
||||
|
|
|
|||
|
|
@ -635,6 +635,9 @@ ul.products li.product .star-rating {
|
|||
|
||||
ul.products li.product .button {
|
||||
margin-top: 1em;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
ul.products li.product .price {
|
||||
|
|
@ -2986,6 +2989,10 @@ ul.products li.product {
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
ul.products li.product a img {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
ul.products li.first {
|
||||
clear: both;
|
||||
}
|
||||
|
|
@ -2994,27 +3001,6 @@ ul.products li.last {
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
.woocommerce.columns-1 ul.products li.product {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.woocommerce.columns-2 ul.products li.product {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.woocommerce.columns-3 ul.products li.product {
|
||||
width: 30.75%;
|
||||
}
|
||||
|
||||
.woocommerce.columns-5 ul.products li.product {
|
||||
width: 16.95%;
|
||||
}
|
||||
|
||||
.woocommerce.columns-6 ul.products li.product {
|
||||
width: 13.5%;
|
||||
}
|
||||
|
||||
.woocommerce-result-count {
|
||||
float: right;
|
||||
}
|
||||
|
|
@ -3266,6 +3252,25 @@ form .form-row-wide {
|
|||
margin: .25em;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.woocommerce .columns-1 ul.products li.product {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
.woocommerce .columns-2 ul.products li.product {
|
||||
width: 48%;
|
||||
}
|
||||
.woocommerce .columns-3 ul.products li.product {
|
||||
width: 30.75%;
|
||||
}
|
||||
.woocommerce .columns-5 ul.products li.product {
|
||||
width: 16.95%;
|
||||
}
|
||||
.woocommerce .columns-6 ul.products li.product {
|
||||
width: 13.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.woocommerce .site-content {
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -635,6 +635,9 @@ ul.products li.product .star-rating {
|
|||
|
||||
ul.products li.product .button {
|
||||
margin-top: 1em;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
ul.products li.product .price {
|
||||
|
|
@ -2987,6 +2990,10 @@ ul.products li.product {
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
ul.products li.product a img {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
ul.products li.first {
|
||||
clear: both;
|
||||
}
|
||||
|
|
@ -2995,27 +3002,6 @@ ul.products li.last {
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
.woocommerce.columns-1 ul.products li.product {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.woocommerce.columns-2 ul.products li.product {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.woocommerce.columns-3 ul.products li.product {
|
||||
width: 30.75%;
|
||||
}
|
||||
|
||||
.woocommerce.columns-5 ul.products li.product {
|
||||
width: 16.95%;
|
||||
}
|
||||
|
||||
.woocommerce.columns-6 ul.products li.product {
|
||||
width: 13.5%;
|
||||
}
|
||||
|
||||
.woocommerce-result-count {
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -3269,6 +3255,25 @@ form .form-row-wide {
|
|||
margin: .25em;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.woocommerce .columns-1 ul.products li.product {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
.woocommerce .columns-2 ul.products li.product {
|
||||
width: 48%;
|
||||
}
|
||||
.woocommerce .columns-3 ul.products li.product {
|
||||
width: 30.75%;
|
||||
}
|
||||
.woocommerce .columns-5 ul.products li.product {
|
||||
width: 16.95%;
|
||||
}
|
||||
.woocommerce .columns-6 ul.products li.product {
|
||||
width: 13.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.woocommerce .site-content {
|
||||
padding: 0;
|
||||
|
|
|
|||
Loading…
Reference in a new issue