Hi @golali! Yes, this is possible. The easiest way to accomplish it would probably be to wrap the “to cart” part of the text in a <span> element, and then have a CSS media query that hid that span if the screen was below a certain width.
Thread Starter
Ali
(@golali)
Nice! makes perfect sense.
Which php template should I edit this in?
Plugin Support
Hannah S.L.
(@fernashes)
Automattic Happiness Engineer
Given that it’s CSS, you may be able to find the correct elements to target without modifying templates. Please do note that what you’re asking for is not basic CSS.
If you need a full list of the templates to see how they work, this is a good place to get started:
https://docs.woocommerce.com/document/template-structure/
And if you’d like to know more about modifying CSS on a WordPress site, this is a good resource:
https://thethemefoundry.com/blog/how-to-customize-a-wordpress-theme/
Thread Starter
Ali
(@golali)
@fernashes thank you for your response.
However it’s not css template I’m looking for.
The default add to cart button text doesn’t contain <span> elements. I want to try @apmwebdev suggestion, edit “add to cart” text to “add <span class=”something”>to cart</span>” and later do the trick with css.
so where can I edit the “add to cart text” to “add <span class=”something”>to cart</span>”?
Thanks everyone.
HI @golali. You would need to modify a template to edit this button. Off the top of my head, main place I can think of where you would need to edit this is the single product template.
Thread Starter
Ali
(@golali)
@apmwebdev thanks for your reply.
I did some reading in single product template but I couldn’t find a plain “add to cart” text anywhere. only codes…
could you kindly tell me where I can find the button text to edit?
Thank you very much
Plugin Support
Hannah S.L.
(@fernashes)
Automattic Happiness Engineer
I’m going to bow out of this thread – I’m not a developer and this is beyond what I can offer help with.
Thread Starter
Ali
(@golali)
@fernashes thanks for bearing with us, you’re a kind human being
Hi @golali. I’m in more or less the same boat as Hannah, unfortunately. Doing some digging, though, I found that searching for “Add to cart” within the WooCommerce plugin took me to this line in abstract-wc-product.php.
That means that the template is probably calling single_add_to_cart_text() filter rather than having the exact string Add to cart in the template itself.
Searching for single_add_to_cart_text(), then, I found the /templates/single-product/add-to-cart/ directory, which looks like the template fragments that are used to add the Add to cart button. If you find the button in each of those templates, that is what you need to edit. You will likely need to change it so that it doesn’t call the filter and simply hard-code the text onto the button so that you can add the span to part of it but not the whole thing.
Thread Starter
Ali
(@golali)
@apmwebdev Oh I see.
thanks for all the time and devotions spent on helping me with this problem. I will use your guideline and browse within the templates for a solution.
Have a beautiful day
Ali
You’re welcome! Good luck!
I’m going to go ahead and mark this thread as resolved. Feel free to start a new thread if you have any further questions!
