Home › Forums › WoodMart support forum › Color Swatches Contrast for WCAG 2.0 (Level AA)

Color Swatches Contrast for WCAG 2.0 (Level AA)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 8, 2021 at 4:45 pm #271910

    Sintarta
    Participant

    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?

    March 8, 2021 at 11:23 pm #271981

    Elise Noromit
    Member

    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

    March 9, 2021 at 7:01 am #272010

    Sintarta
    Participant

    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.
    March 9, 2021 at 10:43 am #272088

    Sintarta
    Participant

    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>
    March 9, 2021 at 11:06 am #272094

    Sintarta
    Participant

    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

    March 9, 2021 at 11:17 am #272101

    Elise Noromit
    Member

    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

Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)