Home › Forums › WoodMart support forum › Color Swatches Contrast for WCAG 2.0 (Level AA)
Color Swatches Contrast for WCAG 2.0 (Level AA)
- This topic has 5 replies, 2 voices, and was last updated 3 years, 9 months ago by Elise Noromit.
-
AuthorPosts
-
March 8, 2021 at 4:45 pm #271910
SintartaParticipantHi
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?
March 8, 2021 at 11:23 pm #271981
Elise NoromitMemberHello,
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 #272010
SintartaParticipantWorks on single produsct page, and not on archives pages like shop page.
Svg images comes from your theme, is not mine.
See screenshot
Thank youAttachments:
You must be logged in to view attached files.March 9, 2021 at 10:43 am #272088
SintartaParticipantHi
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 #272094
SintartaParticipantAfter 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 #272101
Elise NoromitMemberHello,
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
-
AuthorPosts
Tagged: Color Swatches, Contrast, svg id, wcag
- You must be logged in to create new topics. Login / Register