Color Swatches Contrast for WCAG 2.0 (Level AA)

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 code

body .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&#8221; xmlns:xlink=”http://www.w3.org/1999/xlink&#8221; 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?

Hello,

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

Works on single produsct page, and not on archives pages like shop page.
Svg images comes from your theme, is not mine.
See screenshot
Thank you

Attachments:

You must be logged in to view attached files.

Hi
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>

After 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

Hello,

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

[Author]

Posts