Improved UI/UX of the Inventory tab (v2)

This commit is contained in:
Jason Kytros 2023-08-30 14:52:12 +03:00
parent be41a3b3dd
commit f4d5c59b75
3 changed files with 30 additions and 8 deletions

View File

@ -0,0 +1,4 @@
Significance: minor
Type: enhancement
Design enhancements for the Inventory tab.

View File

@ -947,8 +947,13 @@
#inventory_product_data .notice,
#variable_product_options .notice {
display: flex;
margin: 10px;
background-color: #ffffff;
border-color: #eee;
border-width: 1px 0px 0px 0px;
border-style: solid;
align-items: center;
box-shadow: 0 0 0;
margin: 5px 0 0;
> p {
a {
text-decoration: none;
@ -958,6 +963,10 @@
> p:not(:last-child) {
width: 85%;
}
> img.info-icon {
width: 1em;
filter: brightness(50%);
}
.woocommerce-add-variation-price-container {
width: 15%;
display: flex;
@ -4938,6 +4947,11 @@ img.help_tip {
float: left;
width: 80%;
._backorders_field .wc-radios li {
display: block;
padding: 0 0 2px;
}
.wc-radios {
display: block;
float: left;

View File

@ -10,13 +10,10 @@ if ( ! defined( 'ABSPATH' ) ) {
}
?>
<div id="inventory_product_data" class="panel woocommerce_options_panel hidden">
<div class="inline notice woocommerce-message show_if_variable">
<p>
<?php echo esc_html_e( 'Settings below apply to all variations without manual stock management enabled.', 'woocommerce' ); ?> <a target="_blank" href="https://woocommerce.com/document/variable-product/"><?php esc_html_e( 'Learn more', 'woocommerce' ); ?></a>
</p>
</div>
<div class="options_group">
<?php
$info_img_url = WC_ADMIN_IMAGES_FOLDER_URL . '/icons/info.svg';
if ( wc_product_sku_enabled() ) {
woocommerce_wp_text_input(
array(
@ -31,6 +28,15 @@ if ( ! defined( 'ABSPATH' ) ) {
do_action( 'woocommerce_product_options_sku' );
?>
<div class="inline notice woocommerce-message show_if_variable">
<img class="info-icon" src="<?php echo esc_url( $info_img_url ); ?>" />
<p>
<?php echo esc_html_e( 'Settings below apply to all variations without manual stock management enabled. ', 'woocommerce' ); ?> <a target="_blank" href="https://woocommerce.com/document/variable-product/"><?php esc_html_e( 'Learn more', 'woocommerce' ); ?></a>
</p>
</div>
<?php
if ( 'yes' === get_option( 'woocommerce_manage_stock' ) ) {
woocommerce_wp_checkbox(
@ -69,8 +75,6 @@ if ( ! defined( 'ABSPATH' ) ) {
'value' => $product_object->get_backorders( 'edit' ),
'label' => __( 'Allow backorders?', 'woocommerce' ),
'options' => wc_get_product_backorder_options(),
'desc_tip' => true,
'description' => __( 'If managing stock, this controls whether or not backorders are allowed. If enabled, stock quantity can go below 0.', 'woocommerce' ),
);
/**