css - Woocommerce - 在变体旁边显示价格 - 格式化

Question

我正在使用我发现的以下代码在 WooCommerce 的变体旁边显示价格。

效果很好，但价格不一致，当变体的长度不同时。 (附上图片)。

如何对齐这些文本(价格)？这是 site .

代码:

//Add prices to variations
add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name' );

function display_price_in_variation_option_name( $term ) {
   global $wpdb, $product;

   $result = $wpdb->get_col( "SELECT slug FROM {$wpdb->prefix}terms WHERE name = '$term'");

   $term_slug = ( !empty( $result ) ) ? $result[0] : $term;

   $query = "SELECT postmeta.post_id AS product_id
   FROM {$wpdb->prefix}postmeta AS postmeta
   LEFT JOIN {$wpdb->prefix}posts AS products ON ( products.ID = postmeta.post_id )
   WHERE postmeta.meta_key LIKE 'attribute_%'
   AND postmeta.meta_value = '$term_slug'
   AND products.post_parent = $product->id";

   $variation_id = $wpdb->get_col( $query );

   $parent = wp_get_post_parent_id( $variation_id[0] );

   if ( $parent > 0 ) {
      $_product = new WC_Product_Variation( $variation_id[0] );

      //this is where you can actually customize how the price is displayed
      return $term . '  ' . woocommerce_price( $_product->get_price() ) . '';
   }
   return $term;
} 

Answer 1

请添加此 CSS。

.tm-extra-product-options .tmcp-field-wrap .amount {
  position: absolute;
  right: 0;
  top: 12px;
}

理想情况下，像这样的 CSS 应该在 WordPress child theme 中.但是，如果您只是想解决问题，这个插件也可以帮助您:https://en-gb.wordpress.org/plugins/simple-custom-css/

谢谢