Product Listing Cards

[heatherbell]

Just sharing in case it helps others.
Default product listing cards display like this (ignoring the viewport display and SOLD stickers) :

Screenshot 2024-01-01 082427.png

For us, this is not a good look:
the View button is pointless;
the Cart button allows a customer to add to cart without reading the product description which is undesirable;
the prices do not align which is not a good look.

Using the following in /templates/override/static/user.css

Code: Select all

/*product listing - hide buttons & align prices to bottom of card*/
.card.h-100.is-product .card-footer {display: none !important;}
.card.h-100.is-product .card-body {flex-direction: column !important; display: flex !important;}
.card.h-100.is-product .card-subtitle {margin-top: auto !important;}

displays this:

Screenshot 2024-01-01 083203.png

[burt]

Here is more on Cards;

https://getbootstrap.com/docs/4.6/compo ... ard/#about

Another idea to get the prices and buttons lined up would be to override the card component, and amend the HTML to put the price into the card-footer div (and remove the buttons), which might negate the need for the extra css.

[heatherbell]

For us, the display looks even better with center alignment like:

Screenshot 2024-01-02 054956.png

with the addition of:

Code: Select all

.card.h-100.is-product {text-align: center!important;}

to the css:

Code: Select all

/*product listing - center contents & hide buttons & align prices to bottom of card*/
.card.h-100.is-product {text-align: center!important;}
.card.h-100.is-product .card-footer {display: none !important;}
.card.h-100.is-product .card-body {flex-direction: column !important; display: flex !important;}
.card.h-100.is-product .card-subtitle {margin-top: auto !important;}

A quick explainer:
.card.h-100.is-product (note there are no spaces between the classes) targets an element (in this case, a <div>) that has all 3 of those classes, .card and .h-100 and .is-product

.card.h-100.is-product .card-footer (note the space between .card.h-100.is-product and .card-footer) targets an element that has the class .card-footer that is a child of an element that has all 3 of the classes, .card and .h-100 and .is-product

It can be much quicker/easier to find targets and their classes using "Dev Tools" in your browser than looking in files.(using Chrome, on a live webpage, either click the top-right kebab menu>More tools>Developer tools or right click and click Inspect or Ctrl+Shift+I)
css can also be tested before applying.
See Identify Elements for a gif with a simple example of use in the User Guide here:
https://phoenixcart.org/phoenixcartwiki ... and_Colour