How to change the minimum height of one featured product block?

  • I am trying to change the minimum height of individual featured product blocks.
    I do not want to change the default minimum height for all featured product blocks, but for one-off individual blocks, preferably using the block markup.

    I want to be able to use the drag handle to reduce the size so that I can place three products in a column, where the left column has one large product, and the right column has two products that fill the height of the left product.

    Right now, I can only do that if I manually change the height of the left product to 1000px, which is too large for my design.

    I looked at the source on https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/src/BlockTypes/FeaturedProduct.php#L22

    But if I add block markup like this to my HTML template (full site editing), the minimum height setting is removed from the block editor:

    <!-- wp:woocommerce/featured-product {"minHeight":150,"editMode":false,"productId":442,"showDesc":false,"showPrice":false} -->
	<!-- wp:buttons -->
	<div class="wp-block-buttons"><!-- wp:button {"align":"center"} -->
	<div class="wp-block-button aligncenter"><a class="wp-block-button__link" href="https://advanced.local/product/belt/">Shop now</a></div>
	<!-- /wp:button --></div>
	<!-- /wp:buttons -->
	<!-- /wp:woocommerce/featured-product -->
	<!-- wp:woocommerce/featured-product /-->

    They key part that does not work for me is "minHeight":150,

    Pinging @sunyatasattva since you recently worked on the block.
    Let me know if I need to open a bug or feature request or something on the GitHub repo instead of a support question.

    Note that I am using WooCommerce Version 6.4.1, not the development version.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @poena

    Thanks for reaching out.

    Just to check – are you using our WooCommerce Blocks extension?

    If yes, then we recommend that you raise this question in the plugin’s dedicated forum directly for better support: https://www.ads-software.com/support/plugin/woo-gutenberg-products-block/

    It is great that you are already following the Github thread.

    Just in case we need to check your configuration could you please share a copy of your site’s System Status? You can find it via WooCommerce > Status. Select “Get system report” and then “Copy for support”. Once you’ve done that, paste it here in your response.

    Thanks

    Thread Starter Carolina Nymark

    (@poena)

    Hi,
    I tried the WooCommerce Block extension too, but there is no difference when it is activated.

    
### WordPress Environment ###

WordPress address (URL): https://advanced.local
Site address (URL): https://advanced.local
WC Version: 6.4.1
REST API Version: ? 6.4.1
WC Blocks Version: ? 7.2.2
Action Scheduler Version: ? 3.4.0
WC Admin Version: ? 3.3.2
Log Directory Writable: ?
WP Version: 5.9.3
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
WP Cron: ?
Language: en_US
External object cache: –

### Server Environment ###

Server Info: nginx/1.16.0
PHP Version: 7.4.1
PHP Post Max Size: 1,000 MB
PHP Time Limit: 1200
PHP Max Input Vars: 4000
cURL Version: 7.67.0
OpenSSL/1.1.1d

SUHOSIN Installed: –
MySQL Version: 8.0.16
Max Upload Size: 300 MB
Default Timezone is UTC: ?
fsockopen/cURL: ?
SoapClient: ?
DOMDocument: ?
GZip: ?
Multibyte String: ?
Remote Post: ?
Remote Get: ?

### Database ###

WC Database Version: 6.4.1
WC Database Prefix: wp_
Total Database Size: 13.63MB
Database Data Size: 11.87MB
Database Index Size: 1.76MB
wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_actions: Data: 0.06MB + Index: 0.11MB + Engine InnoDB
wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_logs: Data: 0.05MB + Index: 0.03MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 7.03MB + Index: 0.06MB + Engine InnoDB
wp_postmeta: Data: 0.36MB + Index: 0.17MB + Engine InnoDB
wp_posts: Data: 3.48MB + Index: 0.22MB + Engine InnoDB
wp_term_relationships: Data: 0.05MB + Index: 0.02MB + Engine InnoDB
wp_term_taxonomy: Data: 0.05MB + Index: 0.03MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.05MB + Index: 0.00MB + Engine InnoDB
wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_attributes_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB

### Post Type Counts ###

attachment: 67
customize_changeset: 2
nav_menu_item: 88
page: 31
post: 114
product: 18
product_variation: 7
revision: 614
wp_global_styles: 14
wp_navigation: 4
wp_template: 5
wp_template_part: 6

### Security ###

Secure connection (HTTPS): ?
					Your store is not using HTTPS. Learn more about HTTPS and SSL Certificates.
Hide errors from visitors: ?

### Active Plugins (2) ###

Gutenberg: by Gutenberg Team – 13.0.0
WooCommerce: by Automattic – 6.4.1

### Inactive Plugins (5) ###

Akismet Anti-Spam: by Automattic – 4.2.2
Core Rollback: by Andy Fragen – 1.3.1
WooCommerce Blocks: by Automattic – 7.4.2
WordPress Beta Tester: by Peter Westwood
Andy Fragen – 3.2.1

WordPress Importer: by wordpressdotorg – 0.7

### Settings ###

API Enabled: –
Force SSL: –
Currency: SEK (kr)
Currency Position: right_space
Thousand Separator: 
Decimal Separator: ,
Number of Decimals: 0
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –

### WC Pages ###

Shop base: #427 - /shop/
Cart: #429 - /cart/
Checkout: #431 - /checkout/
My account: #433 - /my-account/
Terms and conditions: ? Page not set

### Theme ###

Name: Jace
Version: 1.0.4
Author URL: https://fullsiteediting.com
Child Theme: ? – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ?

### Templates ###

Overrides: –

### Action Scheduler ###

Complete: 95
Oldest: 2022-03-27 06:31:28 +0000
Newest: 2022-04-23 05:26:17 +0000

### Status report information ###

Generated at: 2022-04-23 05:31:36 +00:00

    Hi @poena

    Thanks for sharing the System Status Report.

    Can you please try if the CSS shared in this thread works for you? (It is meant to work for featured category but you may try tweaking it for a featured product): https://www.ads-software.com/support/topic/changing-height-of-featured-category-block/

    If that doesn’t help then we recommend reaching out to the following places for development-oriented questions:

    You may also be able to find someone willing to volunteer their time and knowledge in the free PHP support forum at PHP Builder.

    If you do require more help with the actual coding, we’d recommend hiring a developer or one of the customization experts listed at https://woocommerce.com/customizations/.

    Nevertheless, as this is a development related topic, I’m going to leave it open for a bit to see if anyone is able to chime in to help you out here.

    Cheers

    Plugin Contributor sunyatasattva (a11n)

    (@sunyatasattva)

    Hello @poena!

    Do I understand correctly, and are you trying to do something like so?

    With the latest changes I made, you should be able to do that no problem. However, these changes have not been released yet, and will be part of 7.5.0 which will be released in the next few days. Before that, the minHeight attribute was not supported by the FeaturedProduct block.

    However, just be ware that you can’t resize the block smaller than its content, that was a design decision.

    I hope this was helpful!

    Best,

    L.

    Seems we’ve not had additional inputs on this thread apart from Sunyatasattva, which hopefully was helpful for you. We encourage you to make use of the above resources if needed.

    I’ll go ahead and mark the thread as resolved but please feel free to create a new thread if you have further questions.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to change the minimum height of one featured product block?’ is closed to new replies.