styling text for short description on shop page « Support Forum | Kriesi.at

Support Forum » Propulsion

styling text for short description on shop page

13 posts from 4 voices

Started 7 months ago by susan_ideology
Latest reply from Nick
This topic is closed
This topic is resolved

Tags:

susan_ideology
Member

Hi there, I am using the short description facility to display some text underneath the product image on the shop overview page. The text apears in the right place but I want to style it and can't seem to figure out how to pinpoint it.
Have tried the following but to no avail:

.thumbnail_container p{
font-family: "Georgia", serif;
color: #cc9999;
}
#main ul.products.thumbnail_container p{
font-family: "Georgia", serif;
color: #cc9999;
}

Any help gratefully received!

Susan

Posted 7 months ago #
Devin
Moderator

Hi Susan,

Can we take a look at the specific page and content? It should probably be selected specific to the page or you can use the visual editors options to style it within the editor as well.

Regards,

Devin

Posted 7 months ago #
susan_ideology
Member

Hi Devin - here it is.

http://s154267.gridserver.com/shop

Susan

Posted 7 months ago #

Devin
Moderator

Hi Susan,

Try using the following:

#top.post-type-archive-product li.product p {
font-family: "Georgia", serif;
color: #cc9999;
}

Regards,

Devin

Posted 7 months ago #

susan_ideology
Member

brilliant! Thanks Devin.

Just one other thing. I asked in an earlier thread about moving the price below the short description on the shop overview page. You suggested a fix which unfortunately didn't work for me. Here is the thread

http://www.kriesi.at/support/topic/custom-excerpt-size

Is there another solution you can think of?

Susan

Posted 7 months ago #
susan_ideology
Member

Just realised that the fix

#top.post-type-archive-product li.product p {
font-family: "Georgia", serif;
color: #cc9999;
}

only targets the text when you are viewing the whole catalogue. As soon as you to to one of the categories within the catalogue, the text reverts to the default text styling.
Is there a way of targeting all of the catalogue views?

Many thanks.

Susan

Posted 7 months ago #

Ismael
Moderator

Hi,

Try this

.woocommerce p {
font-family: "Georgia", serif!important;
color: #cc9999!importan;
}

Regards,
Ismael

Posted 7 months ago #

susan_ideology
Member

thanks Ishmal. I just added ul.products to limit it to the catalogue page <p> and it works a treat.

There as just the other question I asked Devin in the earlier thread - about moving the price so it is underneath the short description of the product ... I couldn't get the solution he provided me with to work.

http://www.kriesi.at/support/topic/custom-excerpt-size

any ideas? Thanks Susan

Posted 7 months ago #
Nick
Moderator

Hi,

Would you please be more specific about the destination of the move. I looked here ---> http://s154267.gridserver.com/shop/howard-carter , and i see nothing that looks short. It would be great if you could take a screen capture and draw a square to indicate your requirements to avoid a misunderstanding.

Thanks,

Nick

Posted 7 months ago #
susan_ideology
Member

Hi Nick,I think we have our wires crossed. I just want to move the price underneath the "short description" on the shop overview page. At the moment for each product on the shop overview page there is

1. the image
2. the name of the product
3. the price
4. a short description of the product.

I want to re-order 3. and 4.

I used the term "short description" because this is the way in which I managed to get a few words of text to appear on the shop overview page. I customised one of the woo commerce template files to enable me to use the short description box to achieve this.

Sorry if that was confusing.

Susan

Posted 7 months ago #

Nick
Moderator

Hi,

Please make a backup then open woocommerce-hooks.php file located in the /plugins/woocommerce/ folder and locate lines 107-120 which look like

/**
	 * Product Summary Box
	 *
	 * @see woocommerce_template_single_title()
	 * @see woocommerce_template_single_price()
	 * @see woocommerce_template_single_excerpt()
	 * @see woocommerce_template_single_meta()
	 * @see woocommerce_template_single_sharing()
	 */
	add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
	add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
	add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
	add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
	add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

and replace the code on those lines with the code below

/**
	 * Product Summary Box
	 *
	 * @see woocommerce_template_single_title()
	 * @see woocommerce_template_single_price()
	 * @see woocommerce_template_single_excerpt()
	 * @see woocommerce_template_single_meta()
	 * @see woocommerce_template_single_sharing()
	 */
	add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
	add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 10 );
	add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 20 );
	add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
	add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

Thanks,

Nick

Posted 6 months ago #