This Joomla 4 override allows you to display your ecommerce products simply by using Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.

Joomla 4 frontend rendering

PhP markup

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_articles_category
 * @author		web-eau.net
 * @copyright   (C) 2010 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;

if (!$list)
{
	return;
}

?>

<div class="pricing4 py-5">
	
	<div class="container">

		<div class="row mx-5 category-module<?php echo $moduleclass_sfx; ?>">
		
			<?php foreach ($list as $item) : ?>
			
			<div class="col-md-4">
			
				<div class="card card-shadow border-0 my-4">
					
					<!-- intro image -->
					<?php
						$article_images  = json_decode($item->images);
						$article_image   = '';
						$article_image_alt   = '';
							if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
							$article_image  = $article_images->image_intro;
							$article_image_alt  = $article_images->image_intro_alt;
					}?> 
					<a href="<?php echo $item->link; ?>">
						<img class="card-img-top" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
					</a>
									
					<div class="p-3">
						<!-- article title -->
						<h4 class="fw-medium mb-0">								
							<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
						</h4> 
						<!-- article author -->
						<h5 class="subtitle text-uppercase">with <?php echo $item->displayAuthorName; ?></h5> 
						
						<!-- intro text -->
						<p class="mod-articles-category-introtext font-14 mt-3">
							<?php echo $item->displayIntrotext; ?>
						</p>
						
						<div class="d-flex mt-3 justify-content-around">
						<?php $item->urls = new JRegistry($item->urls); ?>
						
							<!-- text url A -->
							<h2 class="price"><?php echo $item->urls->get('urlatext'); ?><small>/m</small></h2> 
							
							<!-- text url B -->
							<div class="ml-auto"><a class="btn btn-danger-gradiant rounded-pill text-white btn-md border-0" href="<?php echo $item->urls->get('urlbtext'); ?>">Choose Plan</a></div> 
						</div>
					</div>
					
				</div>
				
			</div>
			
			<?php endforeach; ?>
			
		</div>
	</div>
</div>

CSS

.pricing4 h1,
.pricing4 h2,
.pricing4 h3,
.pricing4 h4,
.pricing4 h5,
.pricing4 h6 {
  color: #3e4555;
}
.pricing4 .font-weight-medium {
  font-weight: 500;
}
.pricing4 .bg-light {
  background-color: #f4f8fa !important;
}
.pricing4 .subtitle {
  color: #8d97ad;
  line-height: 24px;
}
.pricing4 .font-14 {
  font-size: 14px;
}
.pricing4 .card.card-shadow {
  -webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
  box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
.pricing4 .text-success {
  color: #2cdd9b !important;
}
.pricing4 .price small {
  color: #8d97ad;
  font-size: 16px;
}
.pricing4 h5 {
    line-height: 22px;
    font-size: 18px;
}
.pricing4 .btn-danger-gradiant {
  background: #ff4d7e;
  background: -webkit-linear-gradient(legacy-direction(to right), #ff4d7e 0%, #ff6a5b 100%);
  background: -webkit-gradient(linear, left top, right top, from(#ff4d7e), to(#ff6a5b));
  background: -webkit-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
  background: -o-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
  background: linear-gradient(to right, #ff4d7e 0%, #ff6a5b 100%);
}
 .pricing4 .btn-danger-gradiant:hover {
  background: #ff6a5b;
  background: -webkit-linear-gradient(legacy-direction(to right), #ff6a5b 0%, #ff4d7e 100%);
  background: -webkit-gradient(linear, left top, right top, from(#ff6a5b), to(#ff4d7e));
  background: -webkit-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
  background: -o-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
  background: linear-gradient(to right, #ff6a5b 0%, #ff4d7e 100%);
}
.pricing4 .btn-md {
    padding: 10px 25px;
    font-size: 16px;
}

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net