Home Forums WoodMart – Premium Template Color Swatches Contrast for WCAG 2.0 (Level AA)

This topic contains 5 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 1 month, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #271910

    Sintarta
    Customer

    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” 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.
    #271981

    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

    #272010

    Sintarta
    Customer

    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

    • This reply was modified 1 month, 1 week ago by  Sintarta.
    Attachments:
    You must be logged in to view attached files.
    #272088

    Sintarta
    Customer

    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>
    
    #272094

    Sintarta
    Customer

    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

    • This reply was modified 1 month, 1 week ago by  Sintarta.
    • This reply was modified 1 month, 1 week ago by  Sintarta.
    #272101

    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

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

You must be logged in to reply to this topic.