Return to previous page

(Accessibility) How to modify the product titles and cart badge

This topic has 3 replies, 2 voices, and was last updated 7 years, 7 months ago ago by Olga Barlow

tisorin

Participant

April 13, 2017 at 07:33

Greetings,

For accessibility reasons, I want to make the title of the products to be level 4 headings (h4).

It is easier for blind people to navigate through products with the help of the screenreaders if the products are headings, due to the specific shortcut keys.

Also, I want to make the cart icon more accessible. At the moment the screenreader reads either how many elements are in the cart // if window is small, or the total price // if the window is maximized.

I would like an alternate text that says something like “You have X products in the cart, for a total of N Curency”.

How can I achieve that?

Any help would be greatly appreciated,

Your sincerely, Sorin

#159898 Copied Theme version: 3.11.1 WooCommerce version: 3.0.1

2 Answers

tisorin

Participant

April 13, 2017 at 08:52

I want to clarify something, I don’t want to be misunderstood:

By product title, I mean the link people needs to click to open the product, not the title found in the product page.

For example: on http://beindependent.ro



WordPress.org

Search WordPress.org for:

Showcase

Themes

Plugins

Mobile

Support

Get Involved

About

Blog

Hosting

Download WordPress

Skip to content

Support



Support»Plugin: WooCommerce»(Accessibility) how to modify product titles and cart badge

(Accessibility) how to modify product titles and cart badge

beindependent
(@beindependent)

1 hour, 19 minutes ago

Greetings,

For accessibility reasons, I want to make the title of the products to be level 4 headings (h4).

It is easier for blind people to navigate through products with the help of the screenreaders if the products are headings, due to the specific shortcut keys.

Also, I want to make the cart icon more accessible. At the moment the screenreader reads either how many elements are in the cart // if window is small, or the total price // if the window is maximized.

I would like an alternate text that says something like “You have X products in the cart, for a total of N Curency”.

How can I achieve that?

Any help would be greatly appreciated,

Your sincerely, Sorin
.

Viewing 2 replies – 1 through 2 (of 2 total)

Riaan
(@riaanknoetze)

9 minutes ago

By default, the product titles are <h2>tags; If that’s not the case on your website, it’s likely a result of the product pages being overridden with some custom templates. If you’d like to change that <h2>to <h4>then you’d need to use a customised version of the code outlined at https://github.com/woocommerce/woocommerce/blob/0df920ebde6e157e6bbebd9105846a6c685ddea4/includes/wc-template-functions.php#L577-L585

In terms of the cart icon – WooCommerce doesn’t have a default “cart icon” functionality (it only has a widget). This likely means it’s powered by the theme you’re using and I’d recommend getting in touch with the developers of that theme for more support on this.
.

beindependent
(@beindependent)

1 minute ago

I want to clarify something, I don’t want to be misunderstood:

By product title, I mean the link people needs to click to open the product, not the title found in the product page.

For example: on http://beindependent.ro I have the product “Maşină de scris Braille, Perkins Classic”. That link over there I want to be a heading, so blind people can jump from product to product by pressing H.

#159918 Copied

Olga Barlow

Support staff

April 13, 2017 at 17:00

Hello,

If you want to change the title of the product on the shop page copy xstore/woocommerce/content-product.php file into child theme, edit and change <p class="product-title"> to <h4 class="product-title">
If you want to change top cart widget copy etheme_top_cart function (xstore/framework/woo.php) into child theme functions.php and edit it according to your needs.

Regards

#160050 Copied
Tagged: accessibility, best selling, cart badge, modify product titles, themes, woocommerce
Viewing 3 results - 1 through 3 (of 3 total)