Home › Forums › WoodMart – Premium Template › Color Swatches Contrast for WCAG 2.0 (Level AA)
- You must be logged in to create new topics. Login / Register
Tagged: Color Swatches, Contrast, svg id, wcag
This topic contains 5 replies, has 2 voices, and was last updated by Elise Noromit 1 month, 1 week ago.
-
AuthorPosts
-
March 8, 2021 at 4:45 pm #271910
Hi
1. I need to add border color on color swatches on shop and product page so to have a valid Contrast for WCAG 2.0 (Level AA).
I have test this css codebody .single-product-content .variations .swatches-select>div { padding:3px 5px; border: 1px solid red; }
with on luck.
2. How change the id from <svg version=”1.1″ id=”Layer_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”↩ width=”19px” height=”19px” viewBox=”0 0 19 19″ enable-background=”new 0 0 19 19″ xml:space=”preserve”> so to be not duplicate with the same svg ico
Any help please?
Private Content Hidden-
This topic was modified 1 month, 1 week ago by
Sintarta.
March 8, 2021 at 11:23 pm #271981Hello,
The code works properly: https://prnt.sc/10ghvib
Please clarify your problem.
Our support does not cover changing or issuing SVG image, please contact your designer.
If you have any questions please feel free to contact us.
Best Regards
March 9, 2021 at 7:01 am #272010March 9, 2021 at 10:43 am #272088Hi
Svg
Edit svg files needed for “Available products columns variations” and chenge id for every one of them.
But in the loop for “Available products columns variations” 3 and 4 use different svg with the same id. Thats my problem.
Thats the code<div class="woodmart-products-shop-view <?php echo esc_attr( 'products-view-' . $shop_view ); ?>"> <?php if ( $shop_view != 'grid'): ?> <a rel="nofollow" href="<?php echo add_query_arg( 'shop_view', 'list', woodmart_shop_page_link( true ) ); ?>" class="shop-view per-row-list <?php echo ( 'list' == $current_shop_view ) ? 'current-variation' : ''; ?>"> <?php echo woodmart_get_svg_content( 'list-style' ); ?> </a> <?php endif ?> <?php if ( $per_row_selector && $per_row_options ): ?> <?php foreach ( $products_per_row_options as $key => $value ) : if( $value == 0 ) continue; ?> <a rel="nofollow" href="<?php echo add_query_arg( array( 'per_row' => $value, 'shop_view' => 'grid' ) , woodmart_shop_page_link( true ) ); ?>" class="per-row-<?php echo esc_attr( $value ); ?> shop-view <?php echo ( $value == $current_per_row && $current_shop_view != 'list' ) ? 'current-variation' : ''; ?>"> <span class="hideme"><?php echo $value;?></span> <?php echo woodmart_get_svg_content( 'column-' . $value ); ?> </a> <?php endforeach; ?> <?php elseif ( $per_row_selector && $per_row_options || $shop_view == 'grid_list' || $shop_view == 'list_grid' ) : ?> <a rel="nofollow" href="<?php echo add_query_arg( 'shop_view', 'grid', woodmart_shop_page_link( true ) ); ?>" class="shop-view <?php echo ( 'grid' == $current_shop_view ) ? 'current-variation' : ''; ?>"> <span class="hideme"><?php echo $value;?></span> <?php echo woodmart_get_svg_content( 'column-3' ); ?> </a> <?php endif ?> </div>
March 9, 2021 at 11:06 am #272094After some digging i found that there is no need to add borders to color swatches to pass from WCAG 2.0 AA. Just add span background-color to woodmart-child/woocommerce/single-product/add-to-cart/varible.php. Here is..
echo '<div class="' . esc_attr( $class ) . '" ' . $title . ' data-value="' . esc_attr( $term->slug ) . '" data-title="' . esc_attr( $term->name ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $term->slug ), false ) . ' style="' . esc_attr( $style ) .'"><span style="background-color:#fff;">' . apply_filters( 'woocommerce_variation_option_name', $term->name ) . '</span></div>';
And for Shop page widget area just add the same span tag to woodmart/inc/widgets/class-widget-layered-nav.php line 697 or and line 803
Thank You
March 9, 2021 at 11:17 am #272101Hello,
Please add this code to the Theme Settings > Custom CSS > Global:
.woodmart-woocommerce-layered-nav .swatches-large .filter-swatch>span { border: 2px solid red; }
Best Regards
-
This topic was modified 1 month, 1 week ago by
-
AuthorPosts
You must be logged in to reply to this topic.
- You must be logged in to create new topics. Login / Register