[Resolved] Change display of some features

[Kristin]

Hello,

I have just installed the theme and was wondering if the following could be changed:
– font size of price to be bigger on product page
– remove page titles?
– Images I’ve added to the homepage can I create a link to product page?
– Can columns be created on pages?

Thanks
Kristin

[David]

Hi there,

1. Price font size – this currently requires a little CSS:

.woocommerce div.product p.price {
    font-size: 40px;
}

2. Page titles can be removed using either the Layout Metabox or Layout Element:
https://docs.generatepress.com/article/layout-metabox-overview/
https://docs.generatepress.com/article/layout-element-overview/

3. You would need an a specific gallery plugin to do that.
The alternative would be to use the default Woocommerce shortcodes to display category or product grids:

https://docs.woocommerce.com/document/woocommerce-shortcodes/

4. If you’re using the classic wordpress editor then a plugin like Lightweight Grid Columns will do that for you. If you’re using the gutenberg block editor then it includes a Columns Block

[Kristin]

Thanks for that David. Very helpful.

I have a few more questions please:
– How do I change the “update cart” button and text colours (I am using woocommerce)?
– can “You may be interested in…” be removed from the checkout page?
– Some products have different pricing options, can the price display as for eg: $75 instead of $75 – $85 and can the price when changed according to options be made bigger?
(here is an example: https://pvcnestboxes.com.au/product/alexandrines-and-large-birds-pvc-nest-box-500mm-x-225mm/)

Thankyou

[David]

5. Cart button color – this CSS:

.woocommerce button.button[name="update_cart"] {
    background-color: red;
    color: #000;
}

6. Do you want to just remove the title or the cross sell products as well?

7. Found this plugin that swaps the summary price based on the variation – haven’t tested this though:

https://wordpress.org/plugins/replace-variable-price-range-by-chosen-variation-price-woocommerce/

To style the variation price ( below the variation selector ) – this CSS:

.woocommerce div.product span.price {
    font-size: 30px;
}

[Kristin]

Thanks again!

Remove the cross sell products as well.

[David]

It requires this PHP snippet:

remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );

https://docs.generatepress.com/article/adding-php/

[Kristin]

Thankyou.

With the “update cart” change colour, can you kindly supply code to change the text aswell?

[David]

Do you want to change the actual wording? Or the style of the text?

[Kristin]

Just the text colour, once I click on “update cart” and the page reloads, the words “update cart” can not be seen.

Thanks

[David]

In the CSS i provided here you have added color: #f5f5f5; which is the same as the background color ( almost ) – change that color to make it more visible.

Note – when no change has been made to the cart the update button is disabled, it inherits the body color and sets the opacity to 50% to make it less visible. The CSS above will change the text for when the update cart button is enabled.

[Kristin]

Thankyou

[David]

You’re welcome

[Author]

Posts