Ask your WordPress questions! Pay money and get answers fast! (more info)

Woocommerce PHP WordPress

  • SOLVED

I want to add exerpt and styling to my archieve page in exactly the same way as http://www.thisiswhyimbroke.com/

My page is http://79.170.40.234/newgcp.uk/

Answers (1)

2016-09-22

Rempty answers:

Hello
add this code to your functions.php for test if show the excerpt


add_action( 'woocommerce_after_shop_loop_item_title', 'add_product_excerpt',1 );
function add_product_excerpt(){
echo '<div class="product_excerpt">';
echo get_the_excerpt();
echo '</div>';
}


suddy12007 comments:

Hi, yes the exerpt has been added


Rempty comments:

Add this css

.product_excerpt{
text-align:justify;
font-weight:normal;
margin-bottom:10px;
line-height:20px;
}


suddy12007 comments:

Brill,

just need the gap between the image and the exerpt tighter.

and

the same amount of exerpt (characters/words) as http://thisiswhyimbroke.com

but so that the Prices & Check it out buttons all remain at the same level on each product

Hope this makes sense


Rempty comments:

add this css to reduce the gap betwwen image and excerot

ul.products li.product img{
margin-bottom:5px!important;
}

About the excerpt length, you need to add the excerpt in the short description, and this must be done manually, if you read the excerpt
of the products http://thisiswhyimbroke.com, are completed paragraphs and wasn't cutted down.


suddy12007 comments:

No worries,

on http://thisiswhyimbroke.com the "check it out" button remains in the same position whether the exerpt is on 1 line or 4 lines. How can this be done?


Rempty comments:

For this you need to assing a min-height

.product_excerpt{
text-align:justify;
font-weight:normal;
margin-bottom:10px;
line-height:20px;
min-height:150px;
}

In mobile don't need set a min-height because you only show one per row, add this to your css too

@media only screen and (max-width: 767px) {
.product_excerpt{
min-height:inherit!important;
}
}


suddy12007 comments:

Hi,

min-height dosent seem to work?


Rempty comments:

Did you add the css? beacuse i can't find it

in the line 310 of your style.css add:

min-height:150px;


suddy12007 comments:

Sorry,

My fault, that works

Awesome.